[译]webpack官网文档 ：指南 -- 4.代码分割

原创翻译，转载请注明出处。 

原文地址：https://webpack.js.org/guides/code-splitting/

 

代码分割是webpack诸多强大功能之一。它允许你把你的代码分割成各种各样的包，你可以按需来加载它们—像当一个用户导航到一个匹配的路由，或者来自用户的一个事件。它允许更小的包，并且允许你按照优先顺序来控制资源加载，如果运用得当，会对你的应用加载时间有显著的影响。

 

为缓存和并行加载而资源分割

 

第三方库的代码分割

一个典型的应用基于框架或者功能的需求，会依赖于许多第三方库。不像一个应用代码，这些库里的代码不怎么经常变。

如果我们保留这些库在它们自己的包里，跟应用代码分开，我们可以利用浏览器的缓存机制，在终端用户的电脑上长时间的保存这些文件。

为了实现这个，第三方库文件名的[hash]部分必须保持为常量，不管应用代码如何变化。

 

CSS分割

你或许也想把样式文件也分割到一个独立的包里，从应用逻辑里独立出来。这提高了样式的可缓存性，并允许浏览器并行加载样式和应用代码，因此可以预防FOUC（flash of unstyled content/没有样式是有内容的瞬间）。

 

按需分割代码

上面的几种资源分割要求用户事先在配置文件里指定好分割点，还可以在应用代码里建立动态的分割点。

 

这可以用于更小的代码块，例如，按照应用的路由，或者按照预测的用户操作行为。这允许用户加载非必须资源的需求。