webpack打包中用于缓存的一些关键点

2022-03-13

webpack打包中做缓存，主要是合理命名文件，需要区分三种哈希值：

  • hash 每次项目构建时变化
  • chunkhash 拆分出的chunk发生变化
  • contenthash 文件内容变化

配置filename和chunkFilename：

  1. js代码 — 用chunkhash
  2. css样式 — 用contenthash

生产环境中注意配置optimization.splitChunks.cacheGroups，分离出公共依赖库：

// ...
cacheGroups: {
    vendor: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `npm.${packageName.replace('@', '')}`;
        },
    }
},
// ...

参考资料

https://www.jianshu.com/p/b83f4a046399

WEB开发