在启用webpack的懒加载(按需加载)后,我们会遇到要解决缓存的问题。

解决缓存问题有几种方法:

第一种就是加个hash值。便每次修改后所编译后的文件名都不一样。这样能达到预期解决缓存的效果。具体设置如下图:

  

  这种解决方案在webpack中可以达到工程化管理的效果。但会对项目管理有一定的阻碍。如用git来管理项目,每次编译都要删掉上一次编译的文件,然后要添加本次编译后的文件再推送。

第二种方法就比较暴力了。不添加hash值,这样每次编译所得到的文件名都是一样的配置如下图:

  

  我们要做的就是找到编译后的入口文件,然后找到它懒加载的方法,并对其进行修改,如加一个随机数,具体方法如下:

  在编译后的入口文件里查找“ document.getElementsByTagName("head")[0]”,找到其加载项,修改前的文件:

  

  修改后的文件:

  

  这样加载到的文件会有一随机数可确保缓存的问题,具体如下图:

  

  但这方法也是弊端,就是每次编译都要手动去修改入口文件。但对git项目管理却比较好管理,不用每次都去添加删除。

  以上两种方法都有利有弊,具体要用什么解决方案就看你如何取舍。当然也可能有更好的解决方案,如有知道的同学麻烦告知我一下。

webapck 按需加载及版本控制问题的更多相关文章

  1. react-router配合webpack实现按需加载

    很久没有写博客了.一直感觉没有什么要写的,但是这个东西确实有必要的.使用react开发,不可能一直打包到一个文件.小项目肯定没有问题,但是变大一旦到几兆,这个问题就很严重.现在又Commonjs,AM ...

  2. 按需加载.js .css文件

    首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script> ...

  3. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...

  4. angularJS 按需加载

    之前做应用的时候都会在首页就把全站的js预先加载进来... 怎么实现按需加载? 首先在$routeProvider里面加resolve属性,angular-route提供的resolve功能,也就是路 ...

  5. requirejs按需加载angularjs文件

    之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载 ...

  6. angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

    用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...

  7. AngularJS中的按需加载ocLazyLoad

    欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出 一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...

  8. .Net 程序集按需加载机制

    在开始本文之前先提两个疑问: 1.一个.Net程序依赖很多的dll,那个他们是在应用程序启动的时候全部把所依赖的动态库全部都加载到应用程序域中的呢还是有选择的加载呢? 2.当应用程序已经启动后我们动态 ...

  9. webpack 代码拆分,按需加载

    转自:https://segmentfault.com/a/1190000007649417?utm_source=weekly&utm_medium=email&utm_campai ...

随机推荐

  1. 7、创建图及图的遍历(java实现)

    1.顺序表用于图的深度优先遍历 public class SeqList { public final int MaxSize = 10; public Object list[]; public i ...

  2. HBase 超详细介绍

    1-HBase的安装 HBase是什么? HBase是Apache Hadoop中的一个子项目,Hbase依托于Hadoop的HDFS作为最基本存储基础单元,通过使用hadoop的DFS工具就可以看到 ...

  3. Python集训营45天—Day04 (函数)

    目录 1. 函数介绍 2. 函数的参数 3. 模块与函数 4. 递归函数 5. 匿名函数 6. 多返回值 python 的学习已经进入到第四天,前面几章我们已经学会了基本的变量操作,以及分支结构和循环 ...

  4. linux 操作系统级别监控 df 命令

    df命令可以查看当前系统磁盘空间的使用情况 命令:df -h du -sh * 查看目录文件暂用磁盘大小 如果磁盘空间不够,需清理磁盘 磁盘速度测试,如果磁盘性能不好,性能测试数据会不准确(读写速度) ...

  5. [C++] 类的设计(2)——拷贝控制(1)

    1.一个类通过定义五种特殊的成员函数来控制此类型对象的拷贝.移动.赋值和销毁:拷贝构造函数.拷贝赋值运算符.移动构造函数.移动赋值运算符和析构函数.(拷贝.移动.析构)   2.拷贝和移动构造函数定义 ...

  6. Beescms_v4.0 sql注入漏洞分析

    Beescms_v4.0 sql注入漏洞分析 一.漏洞描述 Beescms v4.0由于后台登录验证码设计缺陷以及代码防护缺陷导致存在bypass全局防护的SQL注入. 二.漏洞环境搭建 1.官方下载 ...

  7. 使用命令行创建maven web项目

    一,前言 遇到了一个非常简单的maven命令: 总的来说,这是一个用maven创建一个jersey快速开始项目的maven命令. 这次不妨使用maven命令来构建项目,看体验如何. 在文章idea m ...

  8. Django模板语言, 过滤器整理

    Django模板语言,过滤器整理 1. add {{ value|add:"2" }} 把add后的参数加给value: 处理时,过滤器首先会强制把两个值转换成Int类型. 如果强 ...

  9. setStyleSheet 设置背景图片

    设置背景颜色很简单,大部分教程都对 设置背景图像有一个小坑. 设置背景图像主要有两种情况, 第一种:图片的绝对路径 ``` this->setObjectName("mainWindo ...

  10. 读《深入理解Elasticsearch》点滴-查询二次评分

    理解二次评分 二次评分是指重新计算查询返回文档中指定个数文档的得分,es会截取查询返回的前N个,并使用预定义的二次评分方法来重新计算他们的得分 小结 有时候,我们需要显示查询结果,并且使得页面上靠前文 ...