书接上文
列举一下比较容易混淆的概念,并说明一下。
undle、chunk、module区别
bundle是最终输出文件,chunk是编译过程文件,module是我们自己编写的文件无论是ESM、commonJS、AMD、CMD
filename、chunkFilename
filename 指列在 entry 中,打包后输出的文件的名称。
chunkFilename 指未列在 entry 中,却又需要被打包出来的文件的名称。
compiler和compilation
compiler是指从初始化开始到文件输出,整个生命周期只有一个
compilation指当文件发生变化,重新编译和输出,会触发多次
tapable
这个类暴露 tap, tapAsync 和 tapPromise 注册事件方法,对应的调用方法是 call,callAsync,promise,可以使用这些方法,注入自定义的构建步骤,这些步骤将在整个编译过程中不同时机触发
- entry-option
- run
- make
- before-resolve
- build-module
- normal-module-loader
- program
- seal
- emit
优化
打包优化
为什么
- 前端代码需要处理的业务越来越繁杂,代码体积越来越大。开发调试或者上线时都需要花费大量时间去编译,用户使用的时候也要花很多时间和带宽去下载脚本文件。
- 修改一行代码,需要编译所有脚本文件吗?用户只使用一部分功能需要下载所有脚本文件吗?按需加载、有策略性的将代码拆分、提供给用户
- 怎么去实现呢?按什么缓存策略?懒加载和分块一样吗?
方案
避免用户在每次访问时下载额外的代码
通过将修改频率低、重复的代码分离出来,并配上恰当的缓存策略
通过配置 Webpack 来实现代码的分离