webpack:代码分割与按需加载

代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中。

代码中总有些东西我们希望拆分开来,比如:

  • 使用概率较低的模块,希望后期使用的时候异步加载
  • 框架代码,希望能利用浏览器缓存下部分不易变动的代码

懒加载

把不同路由对应的组件分割成不同的代码,然后当路由被访问的时候才加载对应组件。

按需加载拆分:require.ensure()

webpack有代码分割功能。

webpack可以帮我们将代码分成不同的逻辑块,在需要的时候加载这些代码。

require.ensure()是一种使用CommonJS的形式来异步加载模块的策略,在代码中通过require.ensure([<fileurl>])引用模块。

require.ensure(依赖,回调函数,[chunkName])

CSS拆分:使用css-loader

开发者,可能希望能将工程中的所有引入的 CSS 拆分为单个文件,这样可以利用缓存,且利用 CSS 和 JavaScript 并行加载,来加速 web 应用。

 

posted @ 2018-09-05 09:14  叶子玉  阅读(233)  评论(0编辑  收藏  举报