1. oneOf
对于某种类型的文件，webpack 会从上至下匹配所有的 loader，也就是，所有的 loader 都会去处理这种文件。但是，webpack 这种匹配方式在有些场景反而影响了效率。比如说，一个 webpack 只有 babel-loader 处理了 js 文件，那么当它匹配完了以后，完全没有必要再匹配一些针对 css 文件的 loader。所以，这就是为什么，我们使用 oneOf，匹配到了，立刻跳出循环。因此 oneOf 可以优化构建速度
module: {
rules: [
{
oneOf: [
{
test: /\.(png|jpg|jpeg)$/,
use: ['file-loader'],
exclude: /(node_modules|bower_components|dist)/
}
]
}
]
}
2. babel 缓存
babel 缓存的意思是，浏览器第一次拿资源文件的时候，会从服务器上走 http 拉取，但是当刷新页面再次请求的时候，浏览器会直接从缓存（可以是内存，也可以是硬盘，自己配置）当中拿同名文件，因此省去了发送 http 请求拿资源的时间。
3. 多进程打包
业内有两种解决方案比较常用，一个是 thread-loader，一个是 happy-pack，但是 happy-pack 的维护者现在对这个库不再维护了，因此，推荐使用 thread-loader（多进程打包，不是线程）。
{
rules:
[
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components|dist)/,
use: [
/**
* 开启多进程打包，打开进程一般 600 ms，
* 通信也有开销。
*/
{
loader: "thread-loader",
options: {
workers: 3
}
},
{
loader: "babel-loader",
options: {
cacheDirectory: true
}
}
]
}
]
}
需要在 options 字段下配置 workers 也就是进程的个数。注意 thread-loader 并不是开的进程数越多就越好，假如你的 js 代码量很少，开多核反而会降低性能，这是因为打开进程有比较大的开销（600 ms 左右），进程间通信也有开销。
4. tree shaking
tree shaking 的意思是你的项目里面有些代码可能是从来没被引入的，比方说你定义了一个函数但是你从来没有引用到它。这个时候 tree shaking 可以在打包的时候帮你干掉这些代码。
前提
使用 ES6 module
production 默认开启
需要配合 package.json 里面 sideEffects: ["*.css"] 一同使用，否则可能会干掉打包好的 css 文件。
5. code split
code split 直接从字面上理解即可，就是代码分割技术，因为 html 里面的静态资源文件是并行加载的，即发送 http 请求并且把文件放到内存里这个过程是并行的。所以适当的代码分割技术可以让我们的项目运行性能更好。另外，代码分割也可以帮助我们在多路由的场景进行性能优化。
多入口
entry: {
main: './src/js/index.js', // 入口1
test: './src/js/test.js' // 入口2
},
output: {
// [name]是webpack命名规则，使用chunk的name作为输出的文件名。
// 什么是chunk？打包的资源就是chunk，输出出去叫bundle。
// chunk的name是啥呢？ 比如： entry中xxx: "./src/xxx.js", name就是xxx。注意是前面的xxx，和文件名无关。
// 为什么需要这样命名呢？如果还是之前写法main.js，那么打包生成两个js文件都会叫做main.js会发生覆盖。(实际上会直接报错的)
filename: 'js/[name].[contenthash:10].js'
path: resolve(__dirname, 'build')
}
// optimization 代码分割配置
optimization: {
splitChunks:{
chunks: 'all' // 对所有模块都进行分割
// 以下是默认值
// minSize: 20000, // 分割代码最小的大小
// minRemainingSize: 0, // 类似于minSize，最后确保提取的文件大小不能为0
// minChunks: 1, // 至少被引用的次数，满足条件才会代码分割
// maxAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量
// maxInitialRequests: 30, // 入口js文件最大并行请求数量
// enforceSizeThreshold: 50000, // 超过50kb一定会单独打包（此时会忽略minRemainingSize、maxAsyncRequests、maxInitialRequests）
// cacheGroups: { // 组，哪些模块要打包到一个组
// defaultVendors: { // 组名
// test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块
// priority: -10, // 权重（越大越高）
// reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
// },
// default: { // 其他没有写的配置会使用上面的默认值
// minChunks: 2, // 这里的minChunks权重更大
// priority: -20,
// reuseExistingChunk: true,
// },
// },
// 修改配置
// cacheGroups: {
// 组，哪些模块要打包到一个组
// defaultVendors: { // 组名
// test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块
// priority: -10, // 权重（越大越高）
// reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
// },
}
}
上面这块配置可以把你做两件事：
node_modules 中代码单独打包成一个 chunk
自动分析多入口 chunk 中，有没有公共文件，如果有会打包成一个单独 chunk
6. 懒加载和预加载
懒加载
使用 import 函数，同上。回调函数中使用 import 函数。
document.getElementById('btn').onclick = () => {
import('./test').then(({mul})=> {
console.log(mul(4,5))
})
)
预加载
// eslint会对动态导入语法报错，需要修改eslint配置文件
// webpackChunkName: "math"：这是webpack动态导入模块命名的方式
// "math"将来就会作为[name]的值显示。
// webpackPrefetch 开启预加载
document.getElementById('btn').onclick = () => {
import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({mul})=> {
console.log(mul(4,5))
})
)
7. pwa
适用情景，我们希望在用户离线时也可以访问我们的页面。对于 webpack 而言，我需要使用的是 workbox-webpack-plugin。配置成功以后，浏览器在离线后可以从 service-worker 里拉取静态资源。
// webpack
plugins: [
new WorkboxWebpackPlugin.GenerateSW({
// 删除旧的 serviceWorker 且快速启动
clientsClaim: true,
skipWaiting: true
})
]
// js
if('serviceWorker' in navigator){
window.addEventListenr('load', ()=>{
navigator.serviceWorker.register.register('./service-worker.js')
.then(()=>{
console.log('sw 注册成功了')
})
.catch(()=>{
console.log('sw 注册失败')
})
})
}
8. CDN
CDN称之为内容分发网络（Content Delivery Network或Content Distribution Network，缩写：CDN）， 它是指通过相互连接的网络系统，利用最靠近每个用户的服务器； 更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户； 来提供高性能、可扩展性及低成本的网络内容传递给用户；
在开发中，我们使用CDN主要是两种方式：
方式一：打包的所有静态资源，放到CDN服务器， 用户所有资源都是通过CDN服务器加载的；
方式二：一些第三方资源放到CDN服务器上
9. JS代码压缩
Terser
optimization: {
minimize: true, // 是否要启用压缩，默认情况下，生产环境会自动开启
minimizer: [
// 压缩时使用的插件，可以有多个
new TerserPlugin(), // js压缩插件
new OptimizeCSSAssetsPlugin() // css压缩插件
],
}
10. gizp
浏览器发送请求时，会在请求头中设置Accept-Encoding:gzip,deflate,br。表明浏览器支持gzip。服务器收到浏览器发送的请求之后，判断浏览器是否支持gizp，如果支持gzip，则向浏览器传送压缩过的内容，不支持则向浏览器发送未经压缩的内容。一般情况下，浏览器和服务器都支持gzip，响应头返回包含content-encoding:gzip。浏览器接收到服务器的响应之后判断内容是否被压缩，如果被压缩则解压缩显示页面内容
使用compression-webpack-plugin插件对打包结果进行预压缩，可以移除服务器的压缩时间。
const CmpressionWebpackPlugin = require("compression-webpack-plugin")
module.exports = {
plugins: [
new CmpressionWebpackPlugin({
// filename: "[file].gzip"
test: /\.js/, //针对需要预压缩的文件
minRatio: 0.5 //压缩比率
})
]
};
