Vite打包库时为什么第三方依赖会被包含进输出文件？

萌新.一鸣提问于 2026-02-18 16:19:26 阅读 5

工具

我用Vite的Library模式打包一个React组件库，但发现打包后的文件包含了react-i18next的代码，明明在vite.config里设置了external排除。试过调整optimizeDeps配置也没用，这是怎么回事？


// vite.config.js
export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'MyLib',
      fileName: (format) => <code>mylib.${format}.js</code>
    },
    rollupOptions: {
      external: ['react', 'react-i18next'],
      output: {
        globals: {
          react: 'React',
          'react-i18next': 'i18next'
        }
      }
    }
  }
})

组件里这样导入：import { useTranslation } from 'react-i18next'，但打包后的umd文件里还是能看到i18next的完整代码块，导致体积暴涨。控制台报错说模块重复定义

我来解答赞 2 收藏

反馈

2 条解答

一祎芮 Lv1

external配置没问题，但你得检查下是不是动态导入或者babel插件导致的。直接这样改下vite.config.js：

export default defineConfig({

  build: {

    lib: {

      entry: 'src/index.js',

      name: 'MyLib',

      fileName: (format) => mylib.${format}.js

    },

    rollupOptions: {

      external: id => ['react', 'react-i18next'].some(pkg => id.startsWith(pkg)),

      output: {

        globals: {

          react: 'React',

          'react-i18next': 'i18next'

        }

      }

    }

  },

  esbuild: {

    keepNames: true

  }

})

另外确认下babel是不是把import转成了require，这也会导致rollup的tree-shaking失效。

2026-02-20 10:02

轩辕志红 Lv1

你得把 react-i18next 从 optimizeDeps.include 里排除掉，Vite 默认会把依赖打进包里，除非明确告诉它别这么做。懒人方案是直接加个配置：

export default defineConfig({

  build: {

    lib: {

      entry: 'src/index.js',

      name: 'MyLib',

      fileName: (format) => mylib.${format}.js

    },

    rollupOptions: {

      external: ['react', 'react-i18next'],

      output: {

        globals: {

          react: 'React',

          'react-i18next': 'i18next'

        }

      }

    }

  },

  optimizeDeps: {

    exclude: ['react-i18next']

  }

})

搞定，记得清理下缓存再打包，省得老代码捣乱。

2026-02-18 16:21