Vite构建文件过大，寻求vite-plugin-lib-inject-css替代方案及优化

问题根源 #

1. External配置冗余错误：将开发依赖（如eslint、vite）、类型文件（@types/react等）加入external，这些包本不会被打包，错误配置反而干扰Rollup打包逻辑。
2. CSS注入范围失控：vite-plugin-lib-inject-css将../../styling目录下的所有样式注入UMD文件，若该目录包含大量全局样式，直接导致体积暴增。
3. Globals配置无效冗余：开发依赖和类型文件无需全局变量映射，错误配置徒增打包复杂度。

修复步骤 #

1. 修正External与Globals配置 #

仅保留生产依赖和peer依赖到external，移除无关项，同时简化全局变量映射：

rollupOptions: {
  external: ['classnames', 'prop-types', 'react', 'react-dom'],
  output: {
    exports: "named",
    globals: {
      classnames: 'classnames',
      'prop-types': 'PropTypes',
      'react-dom': 'ReactDOM',
      react: 'React'
    }
  }
}

2. 优化CSS打包策略 #

• 若仅需组件自身样式：避免引入../../styling整目录，改为按需引入单个样式文件；
• 若必须引入全局样式：移除vite-plugin-lib-inject-css，让CSS单独输出，由用户自行引入；或启用CSS模块化，仅打包组件用到的样式。

3. 确保生产环境压缩 #

显式配置压缩确保体积最小化：

build: {
  // ...其他lib配置
  minify: 'terser',
  terserOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true
    }
  }
}

4. 精简输出格式（可选） #

若无需多格式输出，指定仅生成需要的模块格式：

build: {
  lib: {
    entry: path.resolve(__dirname, 'src/main.jsx'),
    name: 'my-project',
    formats: ['es'] // 按需添加'umd'
  }
}

5. 排查依赖树 #

用npm ls或pnpm why检查是否有意外引入的大体积依赖，确保仅打包必要代码。

验证修改 #

重新执行vite build后，ES模块体积应与原Webpack输出接近，UMD文件体积会大幅降低。

内容的提问来源于stack exchange，提问作者Félix Jiménez González