Webpack 优化技巧
Tips: loader 面向的是解决某个或者某类模块的问题，而 plugin 面向的是项目整体，解决的是 loader 解决 不了的问题。
为什么要单独打包 runtime
如果不单独打包，主文件(或者叫入口文件，即 main.xxx.js ) 会跟随源文件的改动而变化（会再次生成 main.yyy.js ），用户端会再次下载新文件，达不到利用缓存的好处，所以需要单独打包 runtime ，节省网络带宽，用户打开页面的速度会提升。
用 splitChunks 将 node 依赖单独打包
如果将 react 或 vue 打包进 main.js 会很慢，单独打包是为了编译的时候能够缓存之前的版本。
javascript
optimization: {
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
minSize: 0, // 如果不写 0， 由于 react 文件尺寸大小，会直接跳过
test: /[\\/]node_modules[\\/]/, // 为了匹配 /node_modules/ 或 \node_modules\
name: 'vendors', // 文件名
chunks: 'all', // all 表示同步加载和异步加载， async 表示异步加载， initial 表示同步加载
// 这三行整体意思就是把；两种加载方式的来自 node_modules 目录的文件打包为 vendors.xxx.js
// 其中 vendors 是第三方的意思
}
}
}
},
使用固定 moduleIds
在 optimization 里添加 moduleIds: 'deterministic' ，
common 插件
common chunks 共有文件，用于多页面开发，提取 shared 代码。 在 splitChunks.cacheGroups 里添加一项：
javascript
common: {
// priority: 5,
minSize: 0,
minChunks: 2,
chunks: 'all',
name: 'comon'
}
压缩工具
使用 esbuild-loader 代替 babel-loader，替代掉 terser 压缩；
缓存方案
待填充...