如何拆分JS代码，以及代码拆分的意义

本文转载自“前端之巅”

https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247489547&idx=1&sn=63513db0896a37c26c850610bb926171&chksm=f951ad48ce26245e1eaed4641c879f2576d6b871feafde09326d85cc5882117d5bbab6999897&token=652753404&lang=zh_CN#rd

作者｜David Gilbertson

译者｜无明

根据 Webpack 术语表，有两种不同的文件分割类型：

• 捆绑拆分：创建更多、更小的文件（但每个请求都需要加载它们）以获得更好的缓存效果。

• 代码拆分：动态加载代码，用户只下载他们正在查看的内容所需的代码。

捆绑拆分

捆绑拆分背后的想法非常简单。如果你有一个巨大的文件，哪怕只是修改了一行代码，用户也必须再次下载整个文件。但是，如果你将它分成两个文件，那么用户只需要下载被修改的那个文件，浏览器会从缓存中获取另一个文件。

捆绑拆分与缓存有关，因此对于首次访问网站的用户来说，有没有拆分其实并没有什么不同。

代码拆分（不加载不需要的代码）

基于路由的动态加载（特定于 React）

总结：如果用户会多次访问你的网站，请将你的代码拆分为很多小文件。如果你的网站有些部分是大部分用户不会访问到的，请动态加载这些代码。