工程化：Webpack 层面如何做性能优化

关注

原创最新推荐文章于 2026-11-02 17:25:40 发布 237 阅读 AI 写同款· GEO 优化 ›

优化前的准备工作

准备基于时间的分析工具：我们需要一类插件，来帮助我们统计项目构建过程中在编译阶段的耗时情况。speed-measure-webpack-plugin 分析插件加载的时间
使用 webpack-bundle-analyzer 分析产物内容

代码优化:

无用代码消除，是许多编程语言都具有的优化手段，这个过程称为 DCE (dead code elimination)，即删除不可能执行的代码；

例如我们的 UglifyJs，它就会帮我们在生产环境中删除不可能被执行的代码，例如:

var fn = function() {
	return 1;
	// 下面代码便属于 不可能执行的代码；
	// 通过 UglifyJs (Webpack4+ 已内置) 便会进行 DCE；
	var a = 1;
	return a;
}

摇树优化 (Tree-shaking)，这是一种形象比喻。我们把打包后的代码比喻成一棵树，这里其实表示的就是，通过工具 “摇” 我们打包后的 js 代码，将没有使用到的无用代码 “摇” 下来 (删除)。即消除那些被引用了但未被使用的模块代码。

原理: 由于是在编译时优化，因此最基本的前提就是语法的静态分析，ES6的模块机制提供了这种可能性。不需要运行时，便可进行代码字面上的静态分析，确定相应的依赖关系。
问题: 具有副作用的函数无法被 tree-shaking
- 在引用一些第三方库，需要去观察其引入的代码量是不是符合预期；
- 尽量写纯函数，减少函数的副作用；
- 可使用 webpack-deep-scope-plugin，可以进行作用域分析，减少此类情况的发生，但仍需要注意；

code-spliting: 代码分割技术，将代码分割成多份进行懒加载或异步加载，避免打包成一份后导致体积过大，影响页面的首屏加载；

scope hoisting: 作用域提升，将分散的模块划分到同一个作用域中，避免了代码的重复引入，有效减少打包后的代码体积和运行时的内存损耗；

编译性能优化:

升级至最新版本的 webpack，能有效提升编译性能；
使用 dev-server / 模块热替换 (HMR) 提升开发体验；
- 监听文件变动忽略 node_modules 目录能有效提高监听时的编译效率；
缩小编译范围
- modules: 指定模块路径，减少递归搜索；
- mainFields: 指定入口文件描述字段，减少搜索；
- noParse: 避免对非模块化文件的加载；
- includes/exclude: 指定搜索范围/排除不必要的搜索范围；
- alias: 缓存目录，避免重复寻址；
babel-loader
- 忽略node_moudles，避免编译第三方库中已经被编译过的代码
- 使用cacheDirectory，可以缓存编译结果，避免多次重复编译
多进程并发
- webpack-parallel-uglify-plugin: 可多进程并发压缩 js 文件，提高压缩速度；
- HappyPack: 多进程并发文件的 Loader 解析；
第三方库模块缓存:
- DLLPlugin 和 DLLReferencePlugin 可以提前进行打包并缓存，避免每次都重新编译；
使用分析
- Webpack Analyse / webpack-bundle-analyzer 对打包后的文件进行分析，寻找可优化的地方
- 配置profile：true，对各个编译阶段耗时进行监控，寻找耗时最多的地方
source-map:
- 开发: cheap-module-eval-source-map
- 生产: hidden-source-map；

优化webpack打包速度

减少文件搜索范围
- 比如通过别名
- loader 的 test，include & exclude
Webpack4 默认压缩并行
Happypack 并发调用
babel 也可以缓存编译
Resolve 在构建时指定查找模块文件的规则
使用DllPlugin，不用每次都重新构建
externals 和 DllPlugin 解决的是同一类问题：将依赖的框架等模块从构建过程中移除。它们的区别在于
- 在 Webpack 的配置方面，externals 更简单，而 DllPlugin 需要独立的配置文件。
- DllPlugin 包含了依赖包的独立构建流程，而 externals 配置中不包含依赖框架的生成方式，通常使用已传入 CDN 的依赖包
- externals 配置的依赖包需要单独指定依赖模块的加载方式：全局对象、CommonJS、AMD 等
- 在引用依赖包的子模块时，DllPlugin 无须更改，而 externals 则会将子模块打入项目包中