#Webpack 构建优化：构建速度

#1. 面试题

Q: 如果 Webpack 构建太慢，你会从哪些方面进行优化？

#2. 核心解答

构建优化的目标是：缩短从启动到打包完成的时间。

#(1) 多线程/多进程

利用 CPU 多核优势，并行处理昂贵的任务 (Transpiling/Minifying)。

• Loader: 使用 thread-loader 将高消耗的 loader (如 babel-loader, ts-loader) 放到 Worker 线程池中运行。
• Minifier: TerserPlugin 的 parallel: true (默认已开启)。

#(2) 利用缓存

避免重复编译没有变化的文件。

• Filesystem Cache (webpack 5): 在配置文件中开启 cache: { type: 'filesystem' }。这是 v5 最强特性，直接将编译结果缓存到磁盘，下次启动秒开。
• Babel Cache: babel-loader?cacheDirectory=true。
• HardSourceWebpackPlugin: (webpack 4 专用，v5 已不再需要)。

#(3) 缩小搜索范围

减少 Webpack 查找、解析模块的开销。

• Include/Exclude: 在 Loader 配置中明确 include: path.resolve('src')，必须 exclude node_modules。
• Resolve.alias: 给常用目录配置别名，缩短查找路径。
• Resolve.modules: 指定第三方库目录 (node_modules)，避免层层向上查找。
• Resolve.extensions: 减少后缀列表，将高频后缀 (.js, .jsx) 放在前面。

#(4) 提前构建

• DLL (Dynamic Link Library): (已过时) 将 React, Vue 等库单独打包成 DLL 文件，构建时直接引用。在 Webpack 4+ 之后性能提升不明显且配置繁琐，不再推荐。
• Externals: 将公共库 (CDN 引入) 从 bundle 中排除，不再参与构建，直接在 index.html 中 script 引入。

#(5) 升级 Webpack 版本

• Webpack 5: 带来了持久化缓存 (Persistent Caching) 和更好的 Tree Shaking 算法。直接升级往往是提升最大的方案。

#3. 面试加分项

#Q: 为什么 DLL 被通过了？

因为 Webpack 4 优化了打包性能 (Better Hashing, Scope Hoisting)，加上 HardSourceWebpackPlugin 或 v5 的 FileSystem Cache 已经足够快了。DLL 带来的收益微乎其微，反而增加了配置复杂度。

#4. 总结

• Parallel: Thread-loader.
• Cache: Filesystem (v5), Babel-loader.
• Scope: Exclude node_modules.
• Upgrade: Use Webpack 5.