深入浅出Vite：Vite打包与拆分

一、背景

在生产环境下，为了提高页面加载性能，构建工具一般将项目的代码打包(bundle)到一起，这样上线之后只需要请求少量的 JS 文件，大大减少 HTTP 请求。当然，Vite 也不例外，默认情况下 Vite 利用底层打包引擎 Rollup 来完成项目的模块打包。

某种意义上来说，对线上环境进行项目打包是一个必须的操作。但随着前端工程的日渐复杂，单份的打包产物体积越来越庞大，会出现一系列应用加载性能问题，而代码分割可以很好地解决它们。

当然，在实际的项目场景中，只用 Vite 默认的策略是不够的，我们会更深入一步，学习 Rollup 底层拆包的各种高级姿势，实现自定义拆包，同时我也会带大家通过实际案例复现 Rollup 自定义拆包经常遇到的坑——循环引用问题，一起分析问题出现的原因，也分享一些自己的解决思路和方案，让大家对 Vite 及 Rollup 的代码分割有更加深入的掌握。

不过，在正式讲解之前，给大家介绍几个专业概念：bundle、chunk、vendor。

• bundle：指的是整体的打包产物，包含 JS 和各种静态资源。
• chunk：指的是打包后的 JS 文件，是 bundle 的子集。
• vendor：是指第三方包的打包产物，是一种特殊的 chunk。

二、Code Splitting 解决的问题

在传统的单 chunk 打包模式下，当项目代码越来越庞大，最后会导致浏览器下载一个巨大的文件，从页面加载性能的角度来说，主要会导致两个问题࿱