如何对Webpack vendor chunk执行Tree Shaking（Vue ESM UI库场景）

一、组件库侧配置调整 #

• 给package.json添加sideEffects字段，Webpack4依赖该字段判断包是否存在副作用，是Tree Shaking生效的必要条件：
  如果组件库无全局副作用代码直接配置为"sideEffects": false；如果有全局样式导入，调整为"sideEffects": ["*.css", "*.scss", "*.less"]避免样式被误删除。
• 保证组件库打包输出为纯ESM格式：
  打包时禁止将ES模块语法转成CommonJS，若组件库用@babel/preset-env编译，必须配置modules: false，CommonJS模块无法被Tree Shaking。
• 入口文件使用逐个命名导出，禁止整包导出：
  正确写法示例：

  export { default as OneComponent } from './components/OneComponent'
  export { default as TwoComponent } from './components/TwoComponent'
  

  禁止写成整包对象导出的形式：const all = {OneComponent, TwoComponent}; export default all，该写法会导致所有组件都被标记为已使用。
• 在package.json中指定ESM入口：新增"module": "es/index.js"，路径指向你打包出的ESM格式入口文件，Webpack4会优先读取该字段用于Tree Shaking分析。

二、业务项目侧配置调整 #

• 修正@babel/preset-env配置，现有配置未指定modules参数，默认会将ES模块转成CommonJS破坏Tree Shaking，修改babel配置：

  {
    "presets": [
      ["@babel/preset-env", { "modules": false }]
    ],
    "plugins": ["transform-vue-jsx"]
  }
  

• 开启Tree Shaking相关配置：
  production模式下Webpack4默认开启死码移除，若你需要在development模式下验证，需手动添加配置：

  module.exports = {
    // 其他配置
    optimization: {
      usedExports: true,
      sideEffects: true
    }
  }
  

• 确认构建时使用production模式：development模式仅会标记未使用代码，不会真正删除未引用的组件代码。

三、验证方式 #

在组件库未被引用的组件代码中添加测试代码console.log('测试未引用组件')，业务项目构建后检索打包产物，若不存在该测试日志则说明Tree Shaking已生效。

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