Webpack 4中如何清理旧Chunk文件？避免全量资源重载

这个场景我太熟悉了——之前帮团队做缓存优化时也踩过clean-webpack-plugin全量清理的坑。核心问题就是全量删除dist文件夹后，所有文件的修改时间被重置，导致浏览器的If-Modified-Since缓存校验完全失效，不得不重新拉取所有资源。下面给你几个实用的解决方案：

1. 正确配置clean-webpack-plugin的智能清理策略 #

这是最简单直接的方案，利用插件本身的内置功能来只清理旧的、已变更的chunk：

首先，确保你的chunk文件名都带上内容哈希，这样只有内容变化的chunk才会生成新的哈希文件名：

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
    path: path.resolve(__dirname, 'dist')
  }
};

然后调整clean-webpack-plugin的配置，开启智能清理：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin({
      cleanStaleWebpackAssets: true, // 默认开启，自动识别并删除旧的webpack资产
      protectWebpackAssets: true, // 保护当前构建生成的新资产不被误删
      cleanOnceBeforeBuildPatterns: ['**/*'], // 仅第一次构建时全量清理，后续只删旧资产
      // 如果有不需要清理的静态资源（比如图片、字体），可以添加排除规则
      // cleanOnceBeforeBuildPatterns: ['**/*', '!static/images/**', '!static/fonts/**']
    })
  ]
};

这样每次构建时，插件只会删除之前生成但当前构建不再产出的旧chunk，保留没变化的chunk文件。这些保留的文件修改时间不变，浏览器请求时服务器会返回304 Not Modified，直接用缓存。

2. 结合Manifest文件自定义清理脚本 #

如果需要更精细的控制，可以用webpack-manifest-plugin生成资源清单，然后只删除清单里记录的旧chunk：

步骤1：安装并配置webpack-manifest-plugin #

npm install webpack-manifest-plugin --save-dev

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

module.exports = {
  plugins: [
    new WebpackManifestPlugin({
      fileName: 'manifest.json',
      writeToFileEmit: true // 确保manifest文件被输出到dist目录
    })
  ]
};

步骤2：编写清理脚本 #

创建clean-old-chunks.js文件：

const fs = require('fs');
const path = require('path');
const rimraf = require('rimraf');

const distDir = path.resolve(__dirname, 'dist');
const oldManifestPath = path.join(distDir, 'manifest.json');

// 如果存在旧的manifest文件，就删除里面记录的所有chunk
if (fs.existsSync(oldManifestPath)) {
  const oldManifest = JSON.parse(fs.readFileSync(oldManifestPath, 'utf8'));
  Object.values(oldManifest).forEach(filePath => {
    const fullPath = path.join(distDir, filePath);
    if (fs.existsSync(fullPath)) {
      rimraf.sync(fullPath);
    }
  });
}

步骤3：修改构建命令 #

在package.json里调整构建脚本，先执行清理再构建：

{
  "scripts": {
    "build": "node clean-old-chunks.js && webpack"
  }
}

这个方案的优势是完全可控，你可以根据需求调整要删除的资源类型或路径。

3. 额外注意事项 #

• 确保服务器配置正确的缓存策略，对带哈希的chunk设置长缓存（比如Cache-Control: max-age=31536000, immutable），对入口文件（比如index.html）设置短缓存或不缓存，这样入口文件更新后能引导浏览器加载新的chunk。
• 避免手动修改dist目录里的文件，保持webpack对所有构建资产的管控，这样插件才能准确识别旧资产。

内容的提问来源于stack exchange，提问作者ge022