在实际项目中,Rollup 通常会生成 “共用” chunk —— 被两个或以上的其他 chunk 共享的 chunk。与动态导入相结合,会很容易出现下面这种场景:
在无优化的情境下,当异步 chunk A 被导入时,浏览器将必须请求和解析 A,然后它才能弄清楚它首先需要那个共用 chunk C。这会导致额外的网络往返:
Entry ---> A ---> C
Vite 将使用一个预加载步骤自动重写代码,来分割动态导入调用,因而当 A 被请求时,C 也将 同时 被获取到:
Entry ---> (A + C)
C 也可能有更深的导入,在未优化的场景中,这甚至会导致额外网络往返。Vite 的优化会跟踪所有的直接导入,无论导入的深度如何,都能够完全消除不必要的往返。
参考资料:https://cn.vitejs.dev/guide/features.html#async-chunk-loading-optimization