webpack2.x 代码星散文档 翻译

代码星散(Code Splitting)

代码星散是webpack最受注视的功用。它许可你把你的代码分红差别的部份离开打包,然后实如今须要的时刻再举行加载(按需加载进步速率)————比方用户导航到一个婚配的路由,或许一个用户事宜。
因而能够削减打包的体积,掌握家在流程序次,而且假如运用妥当会极大影响加载速率。
下面有两种代码星散的手艺。(webpack完成)

资本星散——缓存和并行下载(Resource splitting for caching and parallel loads)

厂商代码分立(Vendor code splitting)

传统的一些运用以来一些第三方的库或许功用,差别于运用自身的代码,这些第三方库的代码不是常常更改的。

假如我们把这些第三方的代码放在一块,从运用代码中星散出来,如许我们能够应用用户的电脑的缓存机制来缓存这些须要长时间存在的文件。

为了完成这个目标,给第三方的包打上指纹(hash)来坚持稳定,以区分运用代码的常常变化。检察how to split vendor/library进修ChommonsChunkPlugin插件。

css 星散(css splitting)

或许你想把你的css文件自力出主运用逻辑来打包。这个加强了你的缓存才能,完成styles和主运用代码并行下载,防止涌现FOUC(flash of unstyled content也就是先下载了一大堆无款式的文档,然后衬着款式的状况)

进修how to split css 运用ExtractTextWebpackPlugin.

按需星散(On demand code-splitting)

但是刚开始的那种资本代码星散,请求我们在设置之前明白设定星散点,也能够在运用代码中动态的竖立异步星散点。

运用require.ensure()完成代码星散(Code splitting with require.ensure())

require.ensure()是运用CommonJS的体式格局完成静待资本异步挪用。经由过程增加require.ensure([<fileurl>]),我们能够在代码中打一个星散点,webpack能够以此竖立一个自力的包,包括这个点的一切代码。
进修how to split code 运用require.ensure().

    原文作者:farmerz
    原文地址: https://segmentfault.com/a/1190000008512494
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞