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苹果端的强缓存。。。。

  

原文地址:https://www.cnblogs.com/changyaoself/p/9085827.html

时间: 2024-08-02 06:39:08

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

viewpager+fragment的懒加载实现微信点击和滑动切换功能(切换效果)

前言 1.从上一片文章之后已经半年没有写文章了,那篇文章之后公司进入疯狂的加班,一直到放年假.年后回来之后换了一家创业公司之后,然后又进入疯狂的加班(≧﹏ ≦) -所以一直都没有写文章(其实这都是借口⊙﹏⊙).现在公司没有那么忙了,也该把文章捡起来了,这毕竟是百利有一害的事(一害:费时间). 2.这半年里除了对代码的热情更加高涨(虽然它总是虐我千百遍(≧﹏ ≦) ),还深深的中了爬山的毒,对于年轻的我来说,爬山让我明白了许多.懂得了许多,也锻炼了我的身体.对于程序员来说身体是非常重要的,大家在周

ionic 懒加载页面模块合并

ionic3 懒加载 ionic3 默认使用了懒加载技术,相较以前预加载的版本,ionic3构建的app在首页加载时间上有较大的优化,但是,ionic3默认每个页面都会对应一个模块,对于页面较多,但是每个模块都很小的应用可能并不怎么合理.于是,尝试将几个小模块合并为几个大的模块. 1. 一个模块对应一个页面: 默认状态下每个页面都会对应一个模块,如果项目之中的页面比较多那么最后构建的项目中的将会看到有很多的 js . 原setting.module.ts 1 import { NgModule

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

Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o

Spring集成JPA配置懒加载两个报错解决办法

一:报错no session 因为entitymanager对象在事物提交后就关闭了 报错的 no session相当于sql的session 解决办法:解决办法 在web.xmL配置一个过滤器 使其在这个session中的manager在结束后再关闭open <!--配置openmanager--> <filter> <filter-name>openEntity</filter-name> <filter-class>org.springfr

Mybatis-04 懒加载&amp;缓存&amp;注解开发

1.Mybatis延迟加载策略 1.1 什么是延迟加载(懒加载)? 简单的说,就是要用到数据时才加载,否则不加载. 好处:先单表查询,要用时才去关联查询,提高数据库性能. 坏处:大批量数据查询的时候,查询可能消耗时间,影响用户体验. 1.2 Mybatis的延迟加载 上一个文章说要,association.collection实现了一对一及一对多的映射,他们时具有延迟加载功能的. 一般一对一用立即加载,一对多用延迟加载. 1.2.1 使用assocation实现延迟加载 需求如:查询账户(Acc

Hibernate中的一级缓存、二级缓存和懒加载

1.为什么使用缓存 hibernate使用缓存减少对数据库的访问次数,从而提升hibernate的执行效率.hibernate中有两种类型的缓存:一级缓存和二级缓存. 2.一级缓存 Hibenate中一级缓存,也叫做session的缓存,当调用session的save/saveOrUpdate/get/load/list/iterator方法的时候,都会把对象放入session的缓存中. 一级缓存可以在session范围内减少数据库的访问次数,只在session范围有效,session关闭,一级

020 &lt;one-to-one&gt;、&lt;many-to-one&gt;单端关联上的lazy(懒加载)属性

<one-to-one>.<many-to-one>单端关联上,可以取值:false/proxy/noproxy(false/代理/不代理) 实例一:所有lazy属性默认(支持懒加载) session = HibernateUtils.getSession(); tx = session.beginTransaction(); //不发出SQL语句,支持lazy(懒加载) User user = (User) session.load(User.class, 3); //发出SQL

网站优化--图片的预加载与懒加载(上)

1.延迟加载即懒加载,主要目的是作为服务器前端的优化,减少请求数或延迟请求数,在一些图片非常多的网站中非常有用,当图片位置进入到可视区的时候才会被加载,这样对于含有很多 图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽 最常用的方式是:监控滚动条的高度,当滚动条高度和可视区高度之和小于图片位置距离页面的高度时会被加载 2.预加载:在查看前面张图片的时候加载后面的图片,在提升用户体验的同时会增加服务器的压力 常用方式:创建image对象,通过src属性加载url资源,当资源加载完成后

Hibernate中的一级缓存、二级缓存和懒加载(转)

1.为什么使用缓存 hibernate使用缓存减少对数据库的访问次数,从而提升hibernate的执行效率.hibernate中有两种类型的缓存:一级缓存和二级缓存. 2.一级缓存 Hibenate中一级缓存,也叫做session的缓存,当调用session的save/saveOrUpdate/get/load/list/iterator方法的时候,都会把对象放入session的缓存中. 一级缓存可以在session范围内减少数据库的访问次数,只在session范围有效,session关闭,一级