1.懒加载是什么?

在ionic2中所有的组件、模块、服务、管道等都堆积在app.module.ts模块中,在页面初始化的时候会一次性加载所有的资源,导致资源过大,页面渲染缓慢,也导致app.module.ts混乱,不美观,不易维护,不适用于结构繁多、业务复杂的项目。

懒加载的出现,使得在跳转到对应页面的时候加载对应页面的js、css、html,这样每个页面都是一个模块,只有在需要的时候才会加载,大大缓解了首屏的压力。

2.懒加载的使用:

  https://ionicframework.com/docs/api/navigation/IonicPage/

3.实战项目的结构:

  

  app.module.ts中并没有导入任何页面模块或申明页面组件。每个页面都应用了一个懒加载模块。直接通过push导入模块就可以了。

 4.打包后的结构:

  

   build文件下的js文件是每个页面懒加载编译后的js,跳转到对应页面才会引用对应的js文件,可以在控制台中network中观察。

5.问题来了!

  index.html

  

  index.html文件中引用的js加版本号可有效清除对应js 的缓存。

  但因为build下的一堆数字js是系统编译后自动生成的,没法加版本号,导致被浏览器或服务器缓存。

  出现一个情况:man.js、vendor.js、polyfills.js是请求最新的,build下的js从缓存中读取,所以项目在跳转对应页面,加载引用的js时,会找不到。

6.花式尝试方法

  服务器不做缓存,无效。

  找出页面模块编译后引用js的地方,解决了页面应用js的问题,但导致polyfills.js报错,混淆的代码,已经没有了可读性。

  使用meta不做浏览器缓存,无效

 

7.解决办法,去掉懒加载,使用首屏全部加载,混淆代码,极致压缩。

  网上很少有对应的资源,因为ionic3基本上用来做app开发,资料很少。因为已经上了正式服,无奈要赶紧解决,全部去掉了懒加载。

  去掉懒加载后的打包

  

   只剩下暴露在index.html中引用的js了,加版本号可解决缓存。

8.自动化混淆代码,每次打包修改文件名,达到清除缓存的作用

  

  npm install map-replace -D
  npm install hashmark -D

  package.json scripts加:

  

  "hashcb": "hashmark -l 8 -r --cwd www/build \"*.{js,css}\" {name}.{hash}{ext} | map-replace -m \"<[^>]+>\" www/index.html",
  "dist": "npm run clean && shx rm -rf www/* && npm run build --prod && npm run hashcb && workbox injectManifest"

  

  打包: npm run dist

  取www/目录下的文件,放弃ionic cordobva build browser --prod 的方式。

9.后续跟进懒加载缓存问题的解决,问题主要还是在ios苹果端的强缓存。。。。

  

ionic3 懒加载在微信上缓存的问题的更多相关文章

  1. ionic3包还原使用yarn命令执行步骤(解决ionic3懒加载报找不到 module的错误)

    使用cnpm 还原ionic3.6的依赖包的时候 可以正常还原,但是使用懒加载就会报找不到 module 的错误.最简单的解决办法是删除node_modules 挂个vpn 重新执行npm insta ...

  2. ionic3懒加载IonicPage使用报错

    ionic3.X版本有不少亮点.作为从angular1到ionic1.ionic2一直用它们开发单页面应用的使用者来说,一直存在的一个痛点就是,将整个项目作为网页不打包成app的话,第一次加载时间太长 ...

  3. Vue 自定义图片懒加载指令v-lazyload

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  4. Vue实现一个图片懒加载插件(转载)

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  5. Scala函数式编程(六) 懒加载与Stream

    前情提要 Scala函数式编程指南(一) 函数式思想介绍 scala函数式编程(二) scala基础语法介绍 Scala函数式编程(三) scala集合和函数 Scala函数式编程(四)函数式的数据结 ...

  6. webapp图片懒加载实现

    图片懒加载在webapp上非常流行,应用的很广泛. 实现图片懒加载功能:zepto.picLazyLoad.min.js 引入类库 <script src="1.1.3/zepto.m ...

  7. Rest风格中关于JPA使用懒加载的坑

    公司最近使用的ORM框架是JPA实现产品使用的是hibernate,曾经看过一篇博客上面说的是如果团队里面没有一个精通hibernate的人,那么最好不要使用它,我现在是深刻的体会到了.但是使用什么框 ...

  8. Zepto picLazyLoad Plugin,图片懒加载的Zepto插件

    嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...

  9. 一步步学习NHibernate(5)——多对一,一对多,懒加载(2)

    请注明转载地址:http://www.cnblogs.com/arhat 通过上一章的学习,我们建立了Student和Clazz之间的关联属性,并从Student(many)的一方查看了Clazz的信 ...

随机推荐

  1. weblogic上服务器建立

    weblogic上服务器建立

  2. Apache Flink Quickstart

    Apache Flink 是新一代的基于 Kappa 架构的流处理框架,近期底层部署结构基于 FLIP-6 做了大规模的调整,我们来看一下在新的版本(1.6-SNAPSHOT)下怎样从源码快速编译执行 ...

  3. 微软云消息队列 Azure service bus queue

    前言 第一次使用消息队列,遇到了一些问题:同一个消息有多次出列.是一个消息只入列一次,还是多次?还是因为出列问题,出列了多次? Microsoft Azure service bus queue Az ...

  4. scons脚本示例

    import os def list_dir(dir): all_dirs = [] for root, dirs, files in os.walk('./', True): for name in ...

  5. Bootstrap免费模板站推荐

    第一个:http://startbootstrap.com/ 第二个:http://www.bootstrapzero.com/ 第三个:https://bootswatch.com/ 第四个:htt ...

  6. 自定义ListView android

    定义一个实体类,作为ListView的适配器的适配类型.其中name为水果名称.imageId为水果的图片(图片资源可以随便弄几个占用) public class Fruit { private St ...

  7. jQuery匿名函数$(function(){ }

    搬运原地址:https://zhidao.baidu.com/question/473318430.html $(function(){ }实际上是匿名函数.这是JQuery的语法,$表示JQuery ...

  8. Beta项目总结

    Beta冲刺成员名单和工作量比例 姓名 学号 负责内容 工作量比例 张梨贤 170327109 负责企业人员的委托/收回授权.第三方机构的委托授权管理.分级统计展示.分级列表展示 26% 黄腾飞 17 ...

  9. 使用清华源替代Ubuntu源

    sudo nano /etc/apt/source.list 替换为如下文本 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial main ...

  10. Linux下的磁盘分区和逻辑卷

    一.硬盘接口类型 硬盘的接口主要有IDE.SATA.SCSI .SAS和光纤通道等五种类型.其中IDE和SATA接口硬盘多用于家用产品中,也有部分应用于服务器,SATA是一种新生的硬盘接口类型,已经取 ...