优化打包构建速度与应用工程优化
TIP
同一个文件类型有多个loader时，执行顺序从右到左
原因是某个loader可能会依赖上一个loader的结果，必须等到上一个loader执行完，比如处理less,要先less-loader，然后再是style-loader
babel 缓存
js
// 优化第二次打包速度
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
// 开启 babel 缓存
// 第二次构建时，会读取之前的缓存
cacheDirectory: true
}
}
]
}
}多进程打包
webpack4官方提供的thread-loader，或者第三方插件happyPack
前者配置更简单， 两者构建速度相差不大。
配置不需要打包的库,使用CDN引入 externals
js
设置拒绝打包的库
module.exports = {
externals: {
// 忽略库名 --> npm包名
jquery: 'jQuery'
}
}
在入口 index.html 引入 CDN
<script src="xxx"></script>DLL打包
对代码进行单独打包(jQuery, react, vue ...)，第二次以后打包时不再打包第三方库
单独写一个配置文件，生成映射文件与打包文件，在webpack.config.js中配置后即可。详见
优化代码运行的性能
output的filename配置contenthash缓存（hash -> chunkhash -> contenthash）
- hash：每次 webpack 构建时会生成一个唯一的 hash 值 问题：因为 js 和 css 是同时使用一个 hash 值（如果重新打包会导致所有文件缓存都失效）
- chunkhash：根据 chunk 生成 hash 值。如果打包来源于同一个 chunk，那么 hash 值就一样问题：js 和 css 的 hash 值还是一样的, 因为 css 是在 js 文件中被引入的，所以同属于一个 chunk
- contenthash：根据文件的内容生成 hash 值。不同文件的 hash 值移动不一样
Tree shaking 去除无用的代码
前提 ：
- 必须使用 ES6 模块化
- 开启 production 环境
注意 ：
- 在 package.json 中配置忽略文件：sideEffects: [".css", ".less"]，防止@import的文件被Tree shaking
code split 代码分割
当mode: 'production'时自动启用
js
自定义配置参数：
optimization: {
splitChunks: {
chunks: 'async' // 默认来自node_modules或import异步引入的模块
}
}懒加载/预加载
懒加载：当文件需要时才加载 预加载：网页空闲时自动加载
js
// webpackChunkName 此处的注释可以命名打包后文件名，webpackPrefetch 预加载
import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test.js') // // import动态导入, 单独打包成一个 chunk