webpack4.0各个击破(4)—— Javascript & splitChunk
目录
webpack
作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack
工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本
)本篇摘要:
本篇主要介绍基于
webpack4.0
的splitChunks
分包技术。一. Js模块化开发
javascript
之所以需要打包合并,是因为模块化开发的存在。开发阶段我们需要将js
文件分开写在很多零碎的文件中,方便调试和修改,但如果就这样上线,那首页的http
请求数量将直接爆炸。同一个项目,别人2-3个请求就拿到了需要的文件,而你的可能需要20-30个,结果就不用多说了。但是合并脚本可不是“把所有的碎片文件都拷贝到一个
js
文件里”这样就能解决的,不仅要解决命名空间冲突的问题,还需要兼容不同的模块化方案,更别提根据模块之间复杂的依赖关系来手动确定模块的加载顺序了,所以利用自动化工具来将开发阶段的js
脚本碎片进行合并和优化是非常有必要的。二. Js文件的一般打包需求
- 代码编译(
TS
或ES6
代码的编译) - 脚本合并
- 公共模块识别
- 代码分割
- 代码压缩混淆
三. 使用webpack处理js文件
3.1 使用babel转换ES6+语法
babel
是ES6
语法的转换工具,对babel
不了解的读者可以先阅读1. 为什么要进行代码分割?
代码分割最基本的任务是分离出第三方依赖库,因为第三方库的内容可能很久都不会变动,所以用来标记变化的摘要哈希
contentHash
也很久不变,这也就意味着我们可以利用本地缓存来避免没有必要的重复打包,并利用浏览器缓存避免冗余的客户端加载。另外当项目发布新版本时,如果第三方依赖的contentHash
没有变化,就可以使用客户端原来的缓存文件(通用的做法一般是给静态资源请求设置一个很大的max-age
),提升访问速度。另外一些场景中,代码分割也可以提供对脚本在整个加载周期内的加载时机的控制能力。2. 代码分割的使用场景
举个很常见的例子,比如你在做一个数据可视化类型的网站,引用到了百度的
Echarts
作为第三方库来渲染图表,如果你将自己的代码和Echarts
打包在一起生成一个main.bundle.js
文件,这样的结果就是在一个网速欠佳的环境下打开你的网站时,用户可能需要面对很长时间的白屏,你很快就会想到将Echarts
从主文件中剥离出来,让体积较小的主文件先在界面上渲染出一些动画或是提示信息,然后再去加载Echarts
,而分离出的Echarts
也可以从速度更快的CDN
节点获取,如果加载某个体积庞大的库,你也可以选择使用懒加载的方案,将脚本的下载时机延迟到用户真正使用对应的功能之前。这就是一种人工的代码分割。- 代码编译(