webpack---optimization

// 生产环境的配置
optimization: {
    splitChunks: {
        chunk: 'all',
        // 以下都是默认配置，一般不改，记住它的默认行为
        // 将node_modules中的文件打包成一个chunk，同一个被引用的模块只会被打包一次等行为
        // 分割chunk最小为30kb
        minSize: 30 * 1024,
        // 分割chunk最大没有限制
        maxSize: 0,
        // 要提取的chunk最少被引用了1次
        minChunks: 1,
        // 按需加载时，并行加载的文件的最大数量
        maxAsyncRequests: 5,
        // 入口js文件最大并行请求数量
        maxInitialRequests: 3,
        // 可以使用命名规则
        name: true,
        // 具体的命名规则，名称的连接符
        automaticNameDelimiter: '~',
        // 分割的chunk组
        cachGroups: {
            // node_modules中的文件会被打包到venders组中：vendors~xxx.js
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                // 优先级
                priority: -10
            },
            default: {
                // 要被提取的chunk最少被引用了2次
                minChunks: 2,
                priority: -20,
                // 如果当前要打包的模块和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
                reuseExistingChunk: true
            }
        }
    },
    // 将当前模块记录其他模块的hash单独打包为1个runtime文件
    // 这个配置解决了splitChunks缓存失效的问题
    runtimeChunk: {
        // runtime-main.d9di87d92.js(生成一个runtime文件)
        name: entrypoint => `runtime-${entrypoint.name}`
    },
    // 配置生产环境的js和css的压缩方案，也可以使用默认minimizer配置，配置了会更优秀
    // 需要在开发依赖安装terser-webpack-plugin插件并引入
    minimizer: [
        new TerserWebpackPlugin({
            // 开启缓存
            cache: true,
            // 开启多进程打包
            parallel: true,
            // 启动source-map，否则生产无源代码
            sourceMap: true
        })
    ]
},

splitChunks进行代码分割缓存失效的问题：

// index.js中
import('./src/test.js')

// webpack.config.js中
output:{
    chunkFilename: 'js/[name].[contenthash]_chunk.js'
}

test.js会被单独打包成test.dk23kjdsk45_chunk.js

由于contenthash始终会变化，index.js引用了这个带contenthash的js，所以index.js也发生了变化，这就导致了index.js也会被重新打包