webpack特性：代码分离

代码分离是webpack最引人注目的特性之一。这一特性允许你将你的代码分离成各种包，然后可以按需加载，比如：当用户的导航匹配到路由时，或者用户触发一个事件。webpack将代码拆分成较小的包，并允许您控制资源负载优先级，如果正确的使用，会大大缩短应用程序的加载时间。

我们可以利用webpack来完成如下两种类型的代码分离：

一、用于缓存和并行加载的资源分离

1>库代码分离

典型的应用程序会依赖许多第三方库来满足框架/功能需求。 而与应用程序的代码不同，这些第三方库中的代码不会经常变动。

如果我们将这些第三方库中的代码保存在它们自己的bundle中，与应用程序代码分离，我们可以利用浏览器的缓存机制在最终用户的机器上缓存这些文件更长的时间。

不管应用程序代码如何变化，第三方代码中文件名的[hash]部分必须保持不变。 通过使用CommonsChunkPlugin插件来学习如何拆分第三方代码库。

2>CSS 分离

你可能同样希望将样式拆分为独立于程序逻辑的包。
这增强了样式的可缓存性，并允许浏览器与应用程序代码并行加载样式，从而防止FOUC(未定时内容的闪光)。

学习使用ExtractTextWebpackPlugin插件来了解如何拆分CSS 。

二、按需求分离代码

前面介绍的资源拆分类型，需要用户在配置中预先指定分割点，但是同样我们也可以在应用程序代码中创建动态的分割点。

这可以使代码变成更细粒度的代码块，例如，根据我们的应用路由或根据可预测的用户行为。 这允许用户按需加载非必要资源。

• 代码分离 - Using import() – ECMAScript提案方式
• 代码分离 - Using require.ensure – CommonJS 方式

下一篇：库的代码分离