Webpack 是一个强大的模块化打包工具，被广泛应用于前端构建工程化领域。然而，随着项目的规模增大和业务逻辑的复杂度增加，Webpack 打包速度、打包输出的文件大小等问题也逐渐浮现出来。本文将介绍十种 Webpack 打包优化的技巧，帮助你优化 Webpack 构建过程，提高页面性能。
技巧一：缩小打包范围
Webpack 打包的范围越小，打包的速度就越快，文件大小也越小。因此，缩小打包范围是提高 Webpack 打包速度和减少打包文件大小的有效方法。
1. 忽略不必要的文件
可以使用 exclude 和 include 参数来忽略或包含不必要的文件，例如：
-- -------------------- ---- ------- -------------- - - -- --- ------- - ------ - - ----- -------- -------- --------------- ---- ---------------- -- - ----- --------- -------- ------ ---- ---------------- ------------- - - - -展开代码
上述配置排除了 node_modules 目录下的所有 .js 文件和所有不在 src 目录下的 .css 文件。
2. 使用动态导入
动态导入可帮助你按需加载代码和依赖项。Webpack 会将动态导入的代码打包为单独的 chunk，只有在需要时才会加载，从而减小了初始包的大小。
-- -------------------- ---- ------- ----- -------- -------------- - ----- - -------- - - - ----- ---------------- ----- ------- - ----------------------------- ----------------- - ---------------- ----------- - -- ------ ------- - ---------------------------------- -- -- - ------------------------------- -- - ------------------------------------ -- --展开代码
上述示例中，import('lodash') 返回一个 Promise，我们可以使用 async 和 await 实现异步加载代码。
技巧二：合理配置输出选项
输出选项决定了构建后文件的大小和数量，因此合理配置输出选项是降低打包文件大小的重要方法。
module.exports = { // ... output: { filename: '[name].[hash:8].js', path: path.resolve(__dirname, 'dist'), publicPath: '/' } }
上述代码中的 filename 选项配置了输出文件名的格式，[name] 代表入口文件名，[hash:8] 代表文件名的 hash 值，:8 则表示取前 8 位。path 配置了输出路径，publicPath 则配置了公共路径。
技巧三：使用 Tree Shaking 消除无用代码
Tree Shaking 是一个通过静态分析来消除 JavaScript 应用中无用代码的技术。通过 Tree Shaking 可以消除项目中未使用到的模块，从而减小打包后文件的体积。
1. 配置 mode 选项
在 Webpack4 中，配置 mode 选项为 'production' 会自动开启 Tree Shaking。
module.exports = { mode: 'production' }
2. 配置 UglifyJsPlugin
如需在 Webpack3 中使用 Tree Shaking，可通过 plugins 属性中的 UglifyJsPlugin 来实现。在 UglifyJsPlugin 配置中需添加 sideEffects 属性。
-- -------------------- ---- ------- -------------- - - -------- - --- ---------------- --------- - -- --- -- ------- - -- --- -- ------- - -- --- -- ------------ ----- -- --- -- - -展开代码
sideEffects 属性表明哪些文件是相对于 Tree Shaking 安全的（比如只有代码副作用），哪些文件有导出的代码，必须包含在输出中。
技巧四：配置 splitChunksPlugin 分离第三方包
将第三方包和业务代码分离开来有利于缩短打包时间、减小打包文件体积。可以使用 splitChunksPlugin 来将公共代码或第三方包分离成独立的 chunk。
-- -------------------- ---- ------- -------------- - - -- --- ------------- - ------------ - ------- ------ ----- --------- -- -- --- - -展开代码
上述配置会将所有公共代码（即多个 chunk 中都有引用的代码）和第三方包（由于 chunks 参数为 'all'，因此所有 chunk 都会进行分离）都提取到名为 vendors 的 chunk 中。
技巧五：使用 DllPlugin 预编译第三方包
使用 DllPlugin 预编译第三方包可减小打包时间、提高项目运行性能。
1. 在 webpack.config.js 中配置 DllPlugin 插件
-- -------------------- ---- ------- -------------- - - -- --- -------- - --- ------------------- ----- ---------------- ----- -------------------- --------------------------- -- - -展开代码
上述配置在执行打包时会将依赖的库打包成名为 dll_[hash] 的文件。
2. 在 webpack.config 中配置 AddAssetHtmlPlugin 插件
在 webpack.config 中配置 AddAssetHtmlPlugin 插件，用于将预编译的文件自动引入到 HTML 中。
-- -------------------- ---- ------- -------------- - - -- --- -------- - --- -------------------- - --------- ----------------------- --------------------- - -- - -展开代码
上述配置会将预编译的文件自动添加到 HTML 文件中。
技巧六：引入缓存机制
使用缓存机制可帮助我们下次打包时减少一些无用的编译，提高打包速度。
1. 使用 cache-loader
使用 cache-loader，会将每个 loader 产生的结果进行缓存。
-- -------------------- ---- ------- -------------- - - -- --- ------- - ------ - - ----- -------- ---- ---------------- --------------- - - - -展开代码
2. 使用 HardSourceWebpackPlugin
使用 HardSourceWebpackPlugin 插件，可以将文件缓存到硬盘上，下次打包更快。
module.exports = { // ... plugins: [ new HardSourceWebpackPlugin() ] }
技巧七：使用 ParallelUglifyPlugin 并行压缩代码
使用 ParallelUglifyPlugin 插件，可将压缩代码的工作分配到多个进程上，提高压缩速度。
-- -------------------- ---- ------- -------------- - - -- --- -------- - --- ---------------------- --------- ---------- --------- - -- --- - -- - -展开代码
技巧八：按需加载资源
使用按需加载可提高页面性能，减小初始加载大小。
import(/* webpackChunkName: "print" */ './print').then((module) => { const print = module.default // ... })
上述代码会将 print.js 打包为单独的 chunk，只有在需要时才会加载。
技巧九：使用 Source Map 定位问题
使用 Source Map 可帮助我们在调试代码时定位问题。
module.exports = { // ... devtool: 'source-map' }
上述配置会在输出的 JavaScript 文件中生成一个 sourcemap。
技巧十：使用模块化依赖分析工具
使用模块化依赖分析工具，可帮助我们分析项目中哪些模块引入了哪些依赖，从而更好地进行打包优化。
常用的依赖分析工具有：
- webpack-bundle-analyzer
- size-plugin
- source-map-explorer
使用方式如下：
module.exports = { // ... plugins: [ new BundleAnalyzerPlugin() ] }
上述配置启用 webpack-bundle-analyzer，分析打包后的文件结构。
综上所述，优化 Webpack 打包是一个综合性、长期性的工程。本文列举了十种 Webpack 打包优化技巧，包括缩小打包范围、合理配置输出选项、使用 Tree Shaking 消除无用代码、配置 splitChunksPlugin 分离第三方包、使用 DllPlugin 预编译第三方包、引入缓存机制、使用 ParallelUglifyPlugin 并行压缩代码、按需加载资源、使用 Source Map 定位问题、使用模块化依赖分析工具。使用这些技巧可以帮助我们更好地解决 Webpack 打包过程中所面临的问题，从而提高项目的构建速度和页面性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bbf3c3306f20b3a6bd8c60
