Nuxt 1.4项目冗余代码缩减遇阻：unused-webpack-plugin失效求方案

问题描述 #

我希望缩减 Nuxt 1.4 项目中的未使用代码，此前在 Vue.js 项目中使用 unused-webpack-plugin 效果良好，但将其添加到 Nuxt 项目后无法正常工作。请问我哪里操作有误？是否有适用于 Nuxt 的其他优质插件可选？

我的 nuxt.config.js 配置代码：

const UnusedWebpackPlugin = require('unused-webpack-plugin');

module.exports = {
    extend(config, { isDev, isClient }) {
       if (isDev && isClient) {
         config.plugins.push(
              new UnusedWebpackPlugin(),
         )
       };
    }
}

操作错误分析 #

• 插件缺少必要配置参数：unused-webpack-plugin 必须明确指定要扫描的文件路径（patterns）和排除目录（exclude），你现在直接实例化插件却没传任何参数，插件根本不知道要检查哪些文件，自然无法正常运行。
• Nuxt 配置结构错误：Nuxt 1.4 里，webpack 配置的扩展逻辑必须嵌套在 build 字段下，你把 extend 直接放在顶层配置是无效的，webpack 根本不会执行这段扩展代码。

修正后的配置示例：

const UnusedWebpackPlugin = require('unused-webpack-plugin');

module.exports = {
  build: {
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.plugins.push(
          new UnusedWebpackPlugin({
            patterns: ['src/**/*'], // 替换成你项目实际的源码路径
            exclude: ['node_modules', '.nuxt', 'dist'], // 排除不需要扫描的目录
            root: __dirname // 指定项目根目录，确保插件路径识别正确
          })
        )
      }
    }
  }
}

适用于 Nuxt 的替代插件 #

• webpack-bundle-analyzer：它能可视化展示打包后的 bundle 结构，帮你快速定位大文件和冗余模块，Nuxt 1.4 里直接在 nuxt.config.js 中设置 build.analyze: true 就能启用，不用额外装插件。
• purgecss-webpack-plugin：如果是要清理未使用的 CSS 代码，这个插件非常实用，它会扫描你的模板文件，自动移除未被引用的 CSS 规则，Nuxt 中可以通过 @nuxtjs/purgecss 模块集成，配置更省心。
• unused-files-webpack-plugin：和 unused-webpack-plugin 功能一致，但对 Nuxt 的兼容性更好，配置逻辑相近，同样需要指定扫描路径和排除项。

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