Vite库模式下Tree Shaking功能失效问题求助

• 确保库的入口采用ES模块格式

  • 在package.json里设置module字段指向ES模块产物，例如"module": "dist/your-lib.es.js"
  • 同时添加type: "module"（项目采用ESM语法时），或者保证入口文件使用.mjs后缀

• 正确配置Vite构建参数

  • 在vite.config.js的build.lib中指定formats: ['es']，优先输出ES模块（Tree Shaking依赖ESM实现）
  • 开启build.rollupOptions.output.preserveModules，保留模块结构，便于打包工具识别可摇树代码
    示例配置：

  export default defineConfig({
    build: {
      lib: {
        entry: 'src/index.js',
        name: 'YourLib',
        formats: ['es'],
        fileName: (format) => `your-lib.${format}.js`
      },
      rollupOptions: {
        output: {
          preserveModules: true,
          preserveModulesRoot: 'src'
        }
      }
    }
  })
  

• 处理代码副作用

  • 在package.json中添加"sideEffects": false（确认库无副作用代码时），或精确指定有副作用的文件列表，比如"sideEffects": ["*.css", "src/utils/side-effect.js"]
  • 模块内部避免全局变量修改、DOM操作这类无返回值的副作用代码，必要时标记为副作用

• 规范导入导出语法

  • 使用export const xxx = ...或export function xxx()的具名导出，尽量避免默认导出（默认导出对Tree Shaking支持较差）
  • 导入时采用具名导入import { xxx } from 'your-lib'，而非导入默认导出后再解构

• 禁用不必要的代码转换

  • 不要将ES模块转为CommonJS，避免在Vite配置中启用build.commonjsOptions.transformMixedEsModules（除非必须）
  • 确保Babel等工具不会转译ESM语法为CJS，比如禁用@babel/preset-env的modules: 'commonjs'选项

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