本文转载自“前端之巅”
作者|David Gilbertson
译者|无明
根据 Webpack 术语表,有两种不同的文件分割类型:
-
捆绑拆分:创建更多、更小的文件(但每个请求都需要加载它们)以获得更好的缓存效果。
-
代码拆分:动态加载代码,用户只下载他们正在查看的内容所需的代码。
捆绑拆分
捆绑拆分背后的想法非常简单。如果你有一个巨大的文件,哪怕只是修改了一行代码,用户也必须再次下载整个文件。但是,如果你将它分成两个文件,那么用户只需要下载被修改的那个文件,浏览器会从缓存中获取另一个文件。
捆绑拆分与缓存有关,因此对于首次访问网站的用户来说,有没有拆分其实并没有什么不同。
代码拆分(不加载不需要的代码)
基于路由的动态加载(特定于 React)
总结:如果用户会多次访问你的网站,请将你的代码拆分为很多小文件。如果你的网站有些部分是大部分用户不会访问到的,请动态加载这些代码。