webapck 按需加载及版本控制问题
在启用webpack的懒加载(按需加载)后,我们会遇到要解决缓存的问题。
解决缓存问题有几种方法:
第一种就是加个hash值。便每次修改后所编译后的文件名都不一样。这样能达到预期解决缓存的效果。具体设置如下图:
这种解决方案在webpack中可以达到工程化管理的效果。但会对项目管理有一定的阻碍。如用git来管理项目,每次编译都要删掉上一次编译的文件,然后要添加本次编译后的文件再推送。
第二种方法就比较暴力了。不添加hash值,这样每次编译所得到的文件名都是一样的配置如下图:
我们要做的就是找到编译后的入口文件,然后找到它懒加载的方法,并对其进行修改,如加一个随机数,具体方法如下:
在编译后的入口文件里查找“ document.getElementsByTagName("head")[0]”,找到其加载项,修改前的文件:
修改后的文件:
这样加载到的文件会有一随机数可确保缓存的问题,具体如下图:
但这方法也是弊端,就是每次编译都要手动去修改入口文件。但对git项目管理却比较好管理,不用每次都去添加删除。
以上两种方法都有利有弊,具体要用什么解决方案就看你如何取舍。当然也可能有更好的解决方案,如有知道的同学麻烦告知我一下。
webapck 按需加载及版本控制问题的更多相关文章
- react-router配合webpack实现按需加载
很久没有写博客了.一直感觉没有什么要写的,但是这个东西确实有必要的.使用react开发,不可能一直打包到一个文件.小项目肯定没有问题,但是变大一旦到几兆,这个问题就很严重.现在又Commonjs,AM ...
- 按需加载.js .css文件
首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script> ...
- Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现
文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...
- angularJS 按需加载
之前做应用的时候都会在首页就把全站的js预先加载进来... 怎么实现按需加载? 首先在$routeProvider里面加resolve属性,angular-route提供的resolve功能,也就是路 ...
- requirejs按需加载angularjs文件
之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载 ...
- angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js
用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...
- AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出 一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
- .Net 程序集按需加载机制
在开始本文之前先提两个疑问: 1.一个.Net程序依赖很多的dll,那个他们是在应用程序启动的时候全部把所依赖的动态库全部都加载到应用程序域中的呢还是有选择的加载呢? 2.当应用程序已经启动后我们动态 ...
- webpack 代码拆分,按需加载
转自:https://segmentfault.com/a/1190000007649417?utm_source=weekly&utm_medium=email&utm_campai ...
随机推荐
- Git客户端下载
链接:http://pan.baidu.com/s/1eRXsITO 密码:4i6e
- 近日让很多人议论纷纭的P++,PHP新分支?
最近大家可能有看到一个新的名词——P++. 很巧这个词来源于不久前从 Zend 公司离职的 Zeev Suraski 以 PHP 开发组成员的身份提议要创建 PHP 方言,暂命名为 P++. 老兄最近 ...
- 2019年9月3日安卓凯立德全分辨率(路况)夏季版C3551-C7M24-3K21J25懒人包
拷贝懒人包NaviOne文件夹到机器根目录或内存卡根目录下:安装其中的apk程序 2019凯立德C3551-C7M24-3K21J25新组合懒人包 [分辨率]:自适应 [适用系统]:Android2. ...
- net core WebApi——定时任务Quartz
目录 前言 Quartz 测试 问题及解决方法 小结 前言 本来打算昨天都开始写这篇,就因为要把小团队的博客整理汇总,一看二哈的博客那么多,一个个复制粘贴肯定麻烦(其实是我自己觉得复制麻烦),所以穿插 ...
- 使用Git工具批量拉取代码
公司项目比较多,每天上班第一件事就是拉取代码,cd A 目录 git pull cd .. cd B ...... 一个项目一个项目的拉取,感觉也是很费劲的,那么有没有什么一键操作呢 现在执行一个命令 ...
- 2018年蓝桥杯java b组第七题
标题:螺旋折线 如图p1.pgn所示的螺旋折线经过平面上所有整点恰好一次. 对于整点(X, Y),我们定义它到原点的距离dis(X, Y)是从原点到(X, Y)的螺旋折线段的长度. 例如dis(0, ...
- CentOS 8 正式发布
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net] 本文地址:https://www.oschina.net/news/110111/centos-8-re ...
- Python 编译器与解释器
Python 编译器与解释器 Python的环境我们已经搭建好了,可以开始学习基础知识了.但是,在此之前,还要先说说编译器与解释器相关的内容. 如果这部分内容,让你觉得难以理解或不能完全明白,可以暂时 ...
- SpringBoot集成Spring Security入门体验
一.前言 Spring Security 和 Apache Shiro 都是安全框架,为Java应用程序提供身份认证和授权. 二者区别 Spring Security:重量级安全框架 Apache S ...
- 使用XAMPP配置Apache服务器反向代理
反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时 ...