如何从Vue Webpack打包产物中剔除未使用的组件

问题根源 #

Webpack依赖静态分析识别需要打包的模块，你当前代码中使用动态变量moduleName拼接导入路径，Webpack无法提前判断哪些模块会被实际启用，因此会把./components/modules/下所有符合路径模式的文件都打包进去，不管是否被环境变量禁用。

可行解决方案 #

1. 静态枚举模块+环境变量过滤（最推荐）

手动枚举所有可能的模块，通过环境变量明确标记启用状态，让Webpack能静态识别出仅需打包的模块：

// 定义所有模块及对应的启用开关
const allModules = [
  { name: 'dashboard', enabled: process.env.VUE_APP_DASHBOARD === 'true' },
  { name: 'report', enabled: process.env.VUE_APP_REPORT === 'true' },
  { name: 'settings', enabled: process.env.VUE_APP_SETTINGS === 'true' },
  // 新增模块时直接在这里添加即可
];

// 过滤出启用的模块
const enabledModules = allModules.filter(module => module.enabled);

// 加载启用的模块（逻辑和你原有代码一致）
for (const { name } of enabledModules) {
  const config = require(`./components/modules/${name}/config.json`);
  config.name = name;

  try {
    const callbacks = require(`./components/modules/${name}/callbacks.js`);
    config.callbacks = callbacks;
  } catch (error) {
    console.debug('no callbacks defined');
  }

  modules.push(config);

  app.component(
    name,
    defineAsyncComponent(() =>
      import(`./components/modules/${name}/Component.vue`)
    )
  );
}

这里的核心是name为静态字符串，Webpack能精准分析出哪些导入会被执行，未启用的模块对应的文件不会被打包。

2. 用Webpack的ContextReplacementPlugin精准控制打包范围

如果不想手动枚举模块，可以通过Webpack插件直接限定上下文匹配的模块：
在vue.config.js（或Webpack配置文件）中添加：

const webpack = require('webpack');
// 从环境变量获取启用的模块列表，格式如"dashboard,report"
const enabledModules = (process.env.VUE_APP_ENABLED_MODULES || '').split(',');

module.exports = {
  configureWebpack: {
    plugins: [
      // 过滤config.json
      new webpack.ContextReplacementPlugin(
        /\.\/components\/modules\/(.*)\/config\.json$/,
        new RegExp(`^./(${enabledModules.join('|')})/config\\.json$`)
      ),
      // 过滤callbacks.js
      new webpack.ContextReplacementPlugin(
        /\.\/components\/modules\/(.*)\/callbacks\.js$/,
        new RegExp(`^./(${enabledModules.join('|')})/callbacks\\.js$`)
      ),
      // 过滤Component.vue
      new webpack.ContextReplacementPlugin(
        /\.\/components\/modules\/(.*)\/Component\.vue$/,
        new RegExp(`^./(${enabledModules.join('|')})/Component\\.vue$`)
      )
    ]
  }
};

该插件会告诉Webpack只打包符合正则匹配的模块，其他模块会被排除在打包产物之外。

3. 确保Tree Shaking生效的基础配置

• 确认项目的mode设置为production，Webpack仅在生产模式下自动启用Tree Shaking；
• 尽量让callbacks.js使用ES模块规范（export/import），而非CommonJS的module.exports，提升Tree Shaking的有效性；
• 避免任何对未启用模块的间接引用（比如全局存储所有模块路径的数组），确保只有启用的模块被静态引用。

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