有哪些 webpack 优化的建议？
约 1030 字大约 3 分钟
2025-03-15
对于 Webpack 的性能优化，以下是一些方面需要注意并采取最佳实践的建议：
1. 减小文件体积
代码拆分策略： 通过代码拆分，设置一定的参数，控制生成的文件符合一定的体积和数量
代码压缩： 配置 CSS 代码压缩，js 和 html 是默认压缩的。
Tree Shaking： 我们可以在开发过程中尽量使用按需导入的方式，来告诉 webpack 哪些代码可以被剔除。
静态资源压缩优化：
使用
loader将图片、字体等静态资源进行压缩和优化图标，建议尽量使用字体库实现。
和样式相关的图片，我们建议将其合并处理为一张图片，通过 css 去控制偏移量展示。
公共代码抽离 runtime： 使用
@babel/plugin-transform-runtime插件对 babel 进行处理，让辅助代码（公共组件）从中引入，而不是每个文件都生成辅助代码，从而体积更小。
2. 加快构建速度
文件排除 Include/Exclude： 使用
Include/Exclude来排除掉不需要编译的目录和文件，限制 loader 的作用范围。多线程： 可以使用
thread-loader，利用多进程加快构建速度，但是进程的启动也是有时间开销的，需要根据代码规模酌情考虑。缓存策略： 使用
cache缓存eslint和babel的处理结果，加快二次打包的速度sourcemap 策略： 选择根据需求合适的生成策略来提高对应环境的构建速度。
热重载 HMR： 让开发时增量编译代码，未发生修改的代码使用缓存，从而使更新速度更快。
oneOf( )： 使用该方法，可以实现在匹配时候仅命中和执行一个 rule，不再继续执行其他规则的匹配。我们可以通过修改正则匹配的规则，更加精准的去匹配文件，尽量使用一条 rule 来完成对匹配文件的处理。
模块解析 resolve：
使用
resolve.alias配置别名，加快模块的查找速度；使用
resolve.extensions指定扩展名、指定查找的文件类型；使用
resolve.modules指定搜索目录。
3. 优化打包输出
配置
output.filename和output.chunkFilename使用较短的文件名、hash 值等。使用 Webpack 的
optimization.splitChunks来提取和共享共同的代码块，避免重复加载的代码。为要提取的代码块设置合适的缓存策略，通过配置
optimization.runtimeChunk选项来为包含运行时代码的块设置不同的缓存策略。js 和 css 文件的抽离
使用 preload 和 prefetch 技术
4. 优化代码运行性能
使用
Code Split对代码进行分割成多个 js 文件，从而通过控制文件的数量和体积，提升 js 的并行加载速度。使用
import动态导入语法进行按需加载，从而达到需要使用时才加载该资源，不用时不加载资源。使用
Preload / Prefetch对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好。使用
Network Cache能对输出资源文件进行更好的命名，将来好做缓存，从而用户体验更好。使用
Core-js对 js 进行兼容性处理，让我们代码能运行在低版本浏览器。使用
PWA能让代码离线也能访问，从而提升用户体验。
5. 其他优化建议
按照工作需求分别配置开发环境和生产环境，在提升构建速度，代码运行速度同时，提升开发体验、运行体验。
使用
Webpack Bundle Analyzer工具来分析和可视化打包后的代码结构，找出优化的潜力。使用
Webpack Dev Server来提供开发服务器，提供快速的热更新和热替换能力。
通过遵循以上最佳实践，你可以优化 Webpack 的性能，提高构建速度和应用程序的加载速度。
更新日志
e7112-1于