webpack最引人注目的特性之一就是代码分割。它让你可以分割代码成多个包以便于你根据需求载入——例如当用户浏览到某个路由或者触发某个事件时。它允许更小的包,也允许你控制资源载入优先级,如果使用恰当,可以很大程度上影响app载入时间。
webpack主要可以完场两种代码分割:
为了缓存和并行加载的资源分割
vendor代码分割
一个典型的应用会因为框架/功能需求依赖很多第三方库。与应用代码不同,库中的代码一般不会有变动。
如果我们保持库代码在自己的包中而不是和应用代码在一起,我们让浏览器缓存机制去长时间缓存这些文件在终端机器中。
为了起作用,vendor文件名中 [hash]部分必须保持不变,而不考虑应用代码变更。参考how to split vendor/library章节使用CommonsChunkPlugin
CSS分割
你或许希望分割样式代码到各个包中,独立于应用逻辑。这样就加强了样式缓存能力并循序浏览器与应用代码同时加载样式,从而防止FOUC(flash of unstyled content)
参考how to split CSS,使用ExtractTextWebpackPlugin。
按需求分割代码
前面的分割方式要求用户预先在配置中明确分割点,但也有一种方法可以在应用代码中创建动态分割点。
This can be used for more granular chunking of code, for example, per our application routes or as per predicted user behaviour. This allows the user to load non-essential assets on demand.这也可以适用于多颗粒代码分块中,例如,应用中每一个路由或者每一个预期的用户动作。它允许用户根据需求加载非必须资源。
代码分割——使用import()-ECMAScript6方案
代码分割——使用require.ensure-通用JS方法
。