软件开发札记 · 持续修订

菜单
工程化

Webpack 构建性能优化清单

从缓存、并行、模块边界和产物分析入手优化大型前端工程的构建速度。

2026年7月10日1 分钟阅读138

Webpack 构建性能优化清单

构建性能优化应从测量开始。记录冷启动、热更新和生产构建时间,再确定主要瓶颈。

启用持久化缓存

webpack.config.js
export default {
  cache: {
    type: "filesystem",
  },
};

缩小处理范围

Loader 应明确 includeexclude,避免扫描不需要转换的依赖。大型项目还可以结合模块联邦或工作区边界拆分构建单元。

分析产物

产物分析不仅看总体积,也要关注重复依赖、意外打包的 Node.js polyfill 和无法 Tree Shaking 的模块。