ionic3 懒加载在微信上缓存的问题
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 懒加载在微信上缓存的问题的更多相关文章
- ionic3包还原使用yarn命令执行步骤(解决ionic3懒加载报找不到 module的错误)
使用cnpm 还原ionic3.6的依赖包的时候 可以正常还原,但是使用懒加载就会报找不到 module 的错误.最简单的解决办法是删除node_modules 挂个vpn 重新执行npm insta ...
- ionic3懒加载IonicPage使用报错
ionic3.X版本有不少亮点.作为从angular1到ionic1.ionic2一直用它们开发单页面应用的使用者来说,一直存在的一个痛点就是,将整个项目作为网页不打包成app的话,第一次加载时间太长 ...
- Vue 自定义图片懒加载指令v-lazyload
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
- Vue实现一个图片懒加载插件(转载)
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
- Scala函数式编程(六) 懒加载与Stream
前情提要 Scala函数式编程指南(一) 函数式思想介绍 scala函数式编程(二) scala基础语法介绍 Scala函数式编程(三) scala集合和函数 Scala函数式编程(四)函数式的数据结 ...
- webapp图片懒加载实现
图片懒加载在webapp上非常流行,应用的很广泛. 实现图片懒加载功能:zepto.picLazyLoad.min.js 引入类库 <script src="1.1.3/zepto.m ...
- Rest风格中关于JPA使用懒加载的坑
公司最近使用的ORM框架是JPA实现产品使用的是hibernate,曾经看过一篇博客上面说的是如果团队里面没有一个精通hibernate的人,那么最好不要使用它,我现在是深刻的体会到了.但是使用什么框 ...
- Zepto picLazyLoad Plugin,图片懒加载的Zepto插件
嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...
- 一步步学习NHibernate(5)——多对一,一对多,懒加载(2)
请注明转载地址:http://www.cnblogs.com/arhat 通过上一章的学习,我们建立了Student和Clazz之间的关联属性,并从Student(many)的一方查看了Clazz的信 ...
随机推荐
- CRT 重启Was
输入用户名.密码登陆以后 # ps -eaf | grep websphere 找到路径 /usr/IBM/WebSphere/AppServer/ 进入/usr/IBM/WebSphere/AppS ...
- 入职第二天:使用koa搭建node server是种怎样的体验
今天是我入职第二天,leader跟我说,昨天配置好了服务端渲染的文件,今天就先研究研究如何使用koa来搭建一个node server吧! 按照惯例,我去koa官网查了一下什么是koa,结果官网很简单的 ...
- FFPLAY的原理(二)
关于包Packets的注释 从技术上讲一个包可以包含部分或者其它的数据,但是ffmpeg的解释器保证了我们得到的包Packets包含的要么是完整的要么是多种完整的帧. 现在我们需要做的是让SaveFr ...
- AngularJS - 使用RequireJS还是Browserify?
http://www.html-js.com/article/2126 AngularJS - 使用RequireJS还是Browserify? AngularJS之所以吸引了很多开发者的关注,很大一 ...
- id为194024的进程当前未运行
.NET MVC 编译运行时 提示 >> id为194024的进程当前未运行 << 清理解决方案,重新运行
- python中元组、列表、字典、集合知识
像列表一样处理字符串: 仅需要看字符串的首字符就知道如何处理该字符串的情况也很常见.例如,如果有一个姓与名的列表,您可以使用与列表相同的语法查看名与姓的第一个字符.这种看待字符串的方法叫做分片(sli ...
- ES6(阮一峰)学习总结
1.块级作用域的引入 在ES6之前,js只有全局作用域和函数作用域,ES6中let关键字为其引入了块级作用域. { var a = 5; let b = 6; } console.log(a); co ...
- mysql数据库的安装步骤
Redhat6.5 1.准备工作 卸载使用rpm包安装的mysql-server.mysql软件包 安装自带的ncurses-devel包 rpm -ivh /mnt/Packages/ncurses ...
- Python:怎样用线程将任务并行化?
如果待处理任务满足: 可拆分,即任务可以被拆分为多个子任务,或任务是多个相同的任务的集合: 任务不是CPU密集型的,如任务涉及到较多IO操作(如文件读取和网络数据处理) 则使用多线程将任务并行运行,能 ...
- 以Kafka Connect作为实时数据集成平台的基础架构有什么优势?
Kafka Connect是一种用于在Kafka和其他系统之间可扩展的.可靠的流式传输数据的工具,可以更快捷和简单地将大量数据集合移入和移出Kafka的连接器.Kafka Connect为DataPi ...