第 7 卷

27runtimeChunk: 'single' // 将运行时代码（webpack 加载模块的逻辑）拆分为独立 chunk，避免缓存失效

28} 29}

十、如何配置Webpack以利用缓存提高重新构建的速度?

Webpack 重新构建速度慢的核心原因是“重复编译未变化的模块”和“重复执行耗时的构建流程”。

通过缓存机制可复用已编译的模块和构建结果，大幅提升重新构建（如代码修改后）的速度。核心优化方向包括“模块缓存”“构建结果缓存”“ loader 缓存”和“其他辅助优化”。

1. 启用模块缓存（cache 配置）

Webpack 5+ 内置 cache 配置，可将已编译的模块和依赖树缓存到内存或磁盘，重新构建时直接复用未变化的模块，避免重复解析和转译。

Code block

1module.exports = { 2cache: {

3type: 'filesystem', // 缓存类型：filesystem（磁盘缓存，适合多进程构建）或 memory （内存缓存，默认）

4buildDependencies: { 5config: [__filename] // 当 Webpack 配置文件（webpack.config.js）变化时，

invalidate 缓存 6},

7cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack'), // 磁盘缓存目录（默认路径）

说明：开发环境推荐使用 filesystem 缓存，可在重启开发服务器后仍复用缓存；生产环境无需启用（生产构建通常是全量构建，缓存收益有限）。

1. 启用 loader 缓存

多数 loader（如 babel-loader、 sass-loader）支持缓存已处理的模块，避免重复执行转译逻辑（如 Babel 转译 ES6+ 语法）。

• babel-loader 缓存配置：

4{ 5test: /\.js$/,

node_modules/.cache/babel-loader）

12cacheCompression: false // 禁用缓存文件压缩（开发环境无需压缩，提升缓存读取速度）

13} 14}

15] 16}

17] 18}

19}

• sass-loader 缓存配置：

Code block

1module.exports = { 2module: {

3rules: [ 4{

5test: /\.(scss|sass)$/, 6use: [

7'style-loader', 8'css-loader',

9{ 10loader: 'sass-loader',

11options: { 12cacheOptions: {

13cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/sass-loader') // 自定义缓存目录

14} 15}

16} 17]

1. 优化第三方依赖构建（DllPlugin 预编译）

第三方依赖（如 React、Vue、lodash）通常不会频繁变化，可通过 DllPlugin 将其预编译为独立的 DLL（Dynamic Link Library）文件，后续构建时直接复用，无需重复编译第三方依赖。

• 步骤1：创建 DLL 配置文件（webpack.dll.config.js）：

Code block

1const webpack = require('webpack');

2const path = require('path');

3 4module.exports = {

5entry: {

manifest 文件，记录 DLL 模块映射关系 17})

18] 19}

• 步骤2：添加 npm 脚本，执行 DLL 构建：

Code block

1"scripts": { 2"build:dll": "webpack --config webpack.dll.config.js"

3}

执行 npm run build:dll，生成 vendors.dll.js 和 vendors.manifest.json。

• 步骤3：在主 Webpack 配置中引入 DLL：