ionic2 懒加载项目

项目之前没用懒加载,刚开始做项目也没多少经验吧,现在出现了一个比较难的问题就是分享链接的问题,因为是微信商城而且要带个人的标志,只好修改代码,添加懒加载。

1.修改app.module.ts 删除里面所有的pages引入,

只留import { MyApp } from ‘./app.component‘;

将注册组件,导出组件只留MyApp 其他的像自己的一些providers可以保留

修改app.component.ts里面的

rootPage:any = TabsPage;给TabsPage加引号使用字符串形式

2.给每个page添加XX.module.ts

里面引入的东西可以查看http://ionicframework.com/docs/3.0.1/api/IonicPageModule/

之后给给个page 的XX.ts里面添加装饰器

@IonicPage({})

里面的配置具体可看http://ionicframework.com/docs/3.0.1/api/navigation/IonicPage/

3.修改所有的NavController.push()方法里面的引入组件名添加引号使用字符串形式

4.修改所有的

ModalController

方法里面的引入组件名添加引号使用字符串形式

5.引入的插件放在所需page里面的XX.module.ts里面进行引入

6.ionic serve

编译后在www目录里面build目录里面生成按顺序的0.main.js ,0.main.js .map

此时懒加载就可以用 而且页面的url也会变成http://localhost:8100/#/tabs/%E5%88%86%E7%B1%BB/details

像这样的url

时间: 2024-10-07 20:28:17

ionic2 懒加载项目的相关文章

angular懒加载的一些坑

写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成ang

前端项目首屏加速 gzip打包 路由懒加载 cdn资源优化

目前主流的Vue, React 等单页项目中 build 把所有开发遇到的代码打包在一起形成一个js和一个css, 服务器请求, 然后加载js, css 等依赖进行渲染. 因此会经常遇到,个人写的项目,打开十分缓慢,需要加载很长时间才能加载完毕. 就算不是白屏,做了loading处理 但还是会很影响体验 排除服务器带宽实在太低, 服务器压力实在太大, 文件的大小是速度的第一影响. gzip打包 gzip打包很好理解. 请求的东西可以通过压缩的方式, 到了客户端再解压 采用nginx即可 配置方案

【vue】vue-cli3构建项目中实现图片懒加载

前两天正好写了文章如何用实现图片懒加载[性能优化]JS实现图片懒加载,今天在使用vue构建项目的时候就遇到了要做图片懒加载的优化需要,本想把前两天的代码直接copy过来的,后来想查查看有没有更简便的方法,果不其然,vue中直接有插件可以使用,看了下实现时候的效果,实现原理都和原生js是一样的,vue果然真香! 接下来我们来讲vue-lazyload插件的使用: 1.安装插件 cnpm i vue-lazyload -S 2.入口文件main.js中配置: import Vue from 'vue

【java】itoo项目实战之hibernate 懒加载优化性能

在做itoo 3.0 的时候,考评系统想要上线,就开始导入数据了,只导入学生2万条数据,但是导入的速度特别的慢,这个慢的原因是因为导入的时候进行了过多的IO操作.但是导入成功之后,查询学生的速度更加慢,因为底层用了hibernate的hql语句进行查询的,学习过hibernate的人都知道,如果hibernate不设置懒加载的话,只有是有关联的数据都会一次性全部都查询出来,我试了试,查询2万条数据,最深的级联查询是有5层,然后发出来的语句是460条,时间大概是10s.然后就考虑使用lazy进行优

vue-router路由懒加载(解决vue项目首次加载慢)

懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 简单的说

vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、一级mockjs用法、路由懒加载三种方式

不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p>Element UI简单Cascader级联选择器使用</p> <el-cascader :options='options' v-model="selectedOptions" @change="handleChange"> </el-

vue项目中实现图片懒加载的方法

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实现方法(使用vue的vue-lazyload插件) 1.安装插件 npm install vue-lazyload --save-dev 2.在入口文件main.js中引入并使用 import VueLazyload from 'vue-lazyload' 直接使用 Vue.use(VueLazyl

vue-cli项目中引入图片懒加载

1.全局安装vue-lazyload npm install vue-lazyload -g 2.在main.js配置文件引入 import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { //预加载高度 preLoad: 1.3, //错误时显示的图片 error: '/static/about111.jpg', //图片加载中显示的图片 loading: '/static/img/loading.gif', //尝试加载次数 at

vue项目实现路由按需加载(路由懒加载)的3种方式

为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 vue异步组件es提案的import()webpack的require,ensure()1 . vue异步组件技术 ==== 异步加载 vue-router配置路由 , 使用