如何优雅配置Vite实现长尾词的code splitting代码分割？

本文共计961个文字，预计阅读时间需要4分钟。

目录 + Vite如何配置分割代码

1.什么是代码分割 / Code Splitting

2.Vite中Rollup Code Splitting默认方法原理

（1）按动态导入语句分割打包测试 （2）按资源导入入口点分割打包测试

目录

• Vite如何配置分割代码
• 1.什么是代码分割/code spliiting
• 2.Vite 中 rollup code spliiting分割默认方法原理
• （1）按照动态导入语句分割打包测试。
• （2）按照资源导入入口点分割打包测试。
• （3）manualChunks函数 手动自定义分割。（下面的案例）
• 3.如何在Vite中配置（vite.config.ts）代码分割/code spliiting （核心关键）
• Vite代码分割方法1
• Vite代码分割方法2

Vite如何配置分割代码

1.什么是代码分割/code spliiting

前端生态 rollup 和 webpack都有的概念。 如果把所有代码都打包到一起，可能最终的代码非常大。从而影响加载时间。

而且，很多代码是初始加载时，不需要的。因此，我们可以根据代码使用的紧急程度，将代码分割打包后，可以按需加载。