如何在Vite项目中构建无共享Chunk的独立JS文件？

要实现每个入口文件生成完全独立的bundle（无共享chunk，依赖全部内联），需要调整Vite+Rollup的配置，彻底禁用代码分割逻辑，具体方案如下：

关键配置调整 #

你的核心问题是Vite/Rollup默认会对共享依赖进行自动拆分，仅靠manualChunks返回null不足以完全阻止。需要结合以下几项配置：

完整vite.config.js示例 #

import { defineConfig } from 'vite';

// 假设entryPoints是你的入口文件映射，比如{ main: './src/main.js', about: './src/about.js' }
const entryPoints = {
  main: './src/main.js',
  about: './src/about.js'
};

export default defineConfig({
  build: {
    // 禁用CSS拆分，因为不需要输出CSS文件
    cssCodeSplit: false,
    // 不生成单独的资源目录，保持dist结构简洁
    assetsDir: '',
    rollupOptions: {
      input: entryPoints,
      external: ['jquery'],
      output: {
        format: 'es',
        entryFileNames: '[name].js',
        // 即使配置了chunk命名，只要不生成chunk就不会用到
        chunkFileNames: '[name]-[hash].js',
        // 核心：告诉Rollup不要创建任何额外chunk，所有依赖内联到入口文件
        manualChunks: () => undefined,
      },
      // 确保入口文件的导出被保留，同时允许依赖完全内联
      preserveEntrySignatures: 'allow-extension',
    },
  },
});

配置说明 #

• manualChunks: () => undefined：这是最关键的设置，直接阻止Rollup将任何模块拆分为独立chunk，所有依赖都会被打包进对应的入口bundle中（比如GSAP会分别出现在main.js和about.js里）。
• preserveEntrySignatures: 'allow-extension'：保证入口文件的导出结构不受影响，同时允许Rollup将所有依赖内联，避免因内联导致的导出丢失问题。
• cssCodeSplit: false：关闭CSS代码拆分，避免生成不必要的CSS文件（符合你不需要HTML/CSS的需求）。
• assetsDir: ''：取消默认的assets目录，让生成的JS文件直接放在dist根目录下。

验证效果 #

执行vite build后，dist目录下只会生成你定义的入口文件（main.js、about.js），每个文件都包含自身所有依赖的完整副本，不会出现任何额外的chunk文件，完全满足Webflow页面独立注入的需求。

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