1. 长期缓存
webpack 5 通过确定性的 chunk id、模块 id 和导出 id 实现长期缓存，这意味着相同的输入将始终产生相同的输出。这样，当您的用户再次访问更新后的网站时，浏览器可以重用旧的缓存，而不用重新下载所有资源。
// webpack.config.JS module.exports = { // ... output: { // use contenthash to ensure that the file name is associated with the content filename: '[name].[contenthash].js', chunkfilename: '[name].[contenthash].chunk.js', // configure the asset hash to ensure long-term caching assetmodulefilename: '[name].[contenthash][ext][query]', // use file system cache cache: { type: 'Filesystem', }, }, // ... };
2. tree shaking 优化
webpack 5 增强了 tree shaking 的效率，特别是对 esm 的支持。
// package.json { "sideeffects": false, // tell webpack that this package has no side effects and can safely remove unreferenced code } // library.js export function mylibraryfunction() { // ... } // main.js import { mylibraryfunction } from './library.js';
3. 连接模块
webpack 5 的 concatenatemodules 选项可以组合小模块来减少 http 请求的数量。不过这个功能可能会增加内存消耗，所以使用时需要权衡一下：
// webpack.config.js module.exports = { // ... optimization: { concatenatemodules: true, // defaults to true, but may need to be turned off in some cases }, // ... };
4. node.js 模块 polyfills 移除
webpack 5 不再自动为 node.js 核心模块注入 polyfill。开发者需要根据目标环境手动导入：
// if you need to be compatible with older browsers, you need to manually import polyfills import 'core-js/stable'; import 'regenerator-runtime/runtime'; // or use babel-polyfill import '@babel/polyfill';
5. 性能优化实践
-
使用缓存：配置cache.type:’filesystem’使用文件系统缓存来减少重复构建。
-
splitchunks 优化：根据项目需求调整 optimization.splitchunks，例如：
// webpack.config.js module.exports = { // ... optimization: { splitchunks: { chunks: 'all', minsize: 10000, // adjust the appropriate size threshold maxsize: 0, // allow code chunks of all sizes to be split }, }, // ... };
-
模块解析优化：通过resolve.mainfields和resolve.modules配置减少模块解析的开销。
-
并行编译：使用threads-loader或worker-loader并行处理任务，加快编译速度。
-
代码分割：使用动态导入（import()）按需加载代码，减少初始加载时间。
// main.js import('./dynamic-feature.js').then((dynamicfeature) => { dynamicfeature.init(); });
- 模块联合：使用webpack.container.module配置实现跨应用程序的代码共享，减少重复打包。
// webpack.config.js module.exports = { // ... experiments: { outputmodule: true, // enable output module support }, // ... };
6、tree shaking的深入应用
虽然webpack 5本身对tree shake进行了优化，但开发者可以通过一些策略进一步提高其效果。确保您的代码遵循以下原则：
- 避免全局变量污染：全局变量可以防止 tree shake 识别未使用的代码。
- 使用纯函数：确保函数没有副作用，以便webpack可以安全地删除未调用的函数。
- 显式导出：使用显式导出（export const func = … 而不是导出默认 func）有助于 tree shake 更准确地工作。
- 死代码消除：结合eslint的no-unused-vars规则，确保没有未使用的导入。
7.loader和plugin优化
- 减少 loader 使用：每个 loader 都会增加构建时间。仅在必要时使用loaders，并考虑是否可以合并某些loaders的功能。
- 加载器缓存：确保加载器支持并启用缓存，例如使用cachedirectory选项。
- 选择高效的插件：有些插件可能对性能影响较大。评估并选择性能更好的替代方案，或调整其配置以减少开销。
8. source map策略
源映射对于调试至关重要，但它也会增加构建时间和输出大小。您可以根据环境调整source map类型：
// webpack.config.js module.exports = { // ... devtool: isproduction ? 'source-map' : 'cheap-module-source-map', // use a smaller source map in production environment // ... };
9. 图片及静态资源处理
- asset modules：webpack 5引入了asset modules，可以直接处理图片等静态资源，无需额外配置loader。此功能可以简化配置并提高性能。
module.exports = { // ... module: { rules: [ { test: /.(png|jpe?g|gif|svg)$/i, type: 'asset/resource', // Automatic resource processing }, ], }, // ... };
- 图像压缩和优化：使用 image-webpack-loader 等工具在构建过程中自动压缩图像，以减小文件大小。
10.持续监测和分析
- 使用webpack bundle analyzer：这是一个强大的可视化工具，可以帮助您了解输出包的组成，识别大模块，然后对其进行优化。
- 定期检查依赖项：使用npmaudit或yarnaudit等工具检查依赖项的安全性和更新状态，及时删除不再使用的包或升级到更轻的替代方案。
