Vite 中如何启用代码拆分，不使用 `type=\
2024-03-29 09:52:45
在 Vite 中启用代码拆分，无需 type="module"
简介
在 Vite 构建管道中，启用代码拆分并将其嵌入网站小部件时，传统的 type="module" 属性不再适用于 <script> 标签。本文将深入探讨如何解决此问题，并在不添加 type="module" 属性的情况下启用代码拆分。
步骤详解
1. 使用 build.rollupOptions.output.format 选项
在 Vite 配置文件中，通过 build.rollupOptions.output.format 选项将输出格式设置为 iife：
export default defineConfig({
// ... 其他配置
build: {
// ... 其他配置
rollupOptions: {
output: {
format: 'iife'
}
}
}
});
2. 安装 plugin-legacy 插件
安装 vite-plugin-legacy 插件，它为 Vite 构建提供旧版浏览器支持：
npm install --save-dev vite-plugin-legacy
3. 配置 plugin-legacy
在 Vite 配置文件中，将 plugin-legacy 添加到插件列表：
import { defineConfig } from 'vite';
import legacy from 'vite-plugin-legacy';
import { createVuePlugin as vue } from 'vite-plugin-vue2';
export default defineConfig({
plugins: [
vue(),
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})
],
// ... 其他配置
});
4. Polyfill ES6
在 index.html 中，添加 ES6 polyfill：
<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019"></script>
常见问题解答
Q：为什么在 Vite 中需要代码拆分？
A：代码拆分允许将大型 JavaScript 应用程序分解为较小的模块，从而提高应用程序的性能和加载时间。
Q：iife 输出格式如何解决 type="module" 问题？
A：iife 输出格式将应用程序打包为立即调用函数表达式 (IIFE)，它是一个自执行的匿名函数，无需使用 type="module" 加载模块。
Q：plugin-legacy 如何帮助加载旧版浏览器？
A：plugin-legacy 插件将应用程序转换为旧版浏览器可以理解的格式，使其与 ES5 和旧版 JavaScript 引擎兼容。
Q：为什么需要 polyfill ES6？
A：由于旧版浏览器不支持 ES6，因此需要 polyfill 来提供 ES6 特性，确保应用程序在旧版浏览器中也能正常运行。
Q：我还可以使用其他方法来启用代码拆分吗？
A：除了本文所述的方法外，还有一些替代方法，例如使用 dynamic import 语法或加载器。然而，这些方法通常需要添加额外的配置或代码，而本文所述的方法提供了一个简单、有效的解决方案。
总结
通过遵循这些步骤，你可以轻松地在 Vite 中启用代码拆分，而无需添加 type="module" 属性。这种方法允许在旧版浏览器中加载小部件，同时充分利用 Vite 提供的代码拆分优势。
