如何在Vite中启用代码分割且无需添加script的type="module"属性

AI 小北

2026-7-3

问题描述

我正在开发一款可嵌入网站的Widget，客户通过以下格式的script标签将其嵌入网站：

<script src="https://embed.app.com/USER_ID"></script>

该脚本作为应用入口，在客户网站上构建Widget。我当前使用Webpack 4（搭配Vue-cli），正尝试迁移到Vite以获得更好的开发体验。我的Vite配置如下：

import { defineConfig } from 'vite';
import { createVuePlugin as vue } from 'vite-plugin-vue2';
const path = require('path');

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src/')
    }
  },
  build: {
    outDir: 'dist',
    rollupOptions: {
      output: {
        entryFileNames: 'app.js', // 避免文件名添加哈希
        chunkFileNames: '[name].js', // 避免文件名添加哈希
        assetFileNames: '[name].[ext]' // 避免文件名添加哈希
      }
    }
  },
  server: {
    host: '127.0.0.1',
    port: 8081,
    strictPort: true
  },
  css: {
    preprocessorOptions: {
      scss: {}
    }
  }
});

但由于我不提供index.html，且脚本未添加type="module"属性，浏览器中出现错误：

Uncaught SyntaxError: export declarations may only appear at top level of a module.

我理解这是因为Vite默认输出格式为ES模块，必须以模块形式加载。于是我尝试使用UMD或IIFE格式，却得到错误：

Invalid value "umd" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

请问如何在Vite中启用代码分割的同时，无需在加载应用的script标签中添加type属性？

解决方案

要实现启用代码分割且无需添加type="module"的需求，核心是让入口文件以IIFE格式输出（可通过普通script加载），同时分割出的chunk保持ES模块格式（浏览器自动处理模块加载），具体配置步骤如下：

调整Rollup输出格式规则
在build.rollupOptions.output中，为入口文件单独指定IIFE格式，chunk文件使用ES模块格式，同时保留代码分割配置：

build: {
  outDir: 'dist',
  rollupOptions: {
    output: {
      entryFileNames: 'app.js',
      chunkFileNames: '[name].js',
      assetFileNames: '[name].[ext]',
      // 为入口和chunk分别指定格式
      format: chunk => chunk.isEntry ? 'iife' : 'es',
      // 自定义代码分割规则（示例：拆分第三方依赖为vendor chunk）
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return 'vendor';
        }
      }
    }
  }
}

确保入口逻辑自动执行
由于入口文件是IIFE格式，你的Vue应用初始化代码（如new Vue({...}).$mount()）会被包裹在立即执行函数中，嵌入普通script标签后会自动执行，无需手动触发。

修正资源加载路径（可选）
如果Widget部署在CDN或特定路径下，需配置base确保chunk能正确加载：

build: {
  base: 'https://embed.app.com/', // 你的部署根地址
  assetsDir: '', // 让chunk与入口脚本同目录
  // ...其他配置
}

验证构建结果
构建完成后，app.js为IIFE格式的非模块脚本，分割出的vendor.js等文件为ES模块。用户嵌入普通<script src="app.js">后，浏览器会自动加载入口脚本，并由入口脚本动态加载所需chunk，无需添加type="module"属性。

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