代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中。
代码中总有些东西我们希望拆分开来,比如:
- 使用概率较低的模块,希望后期使用的时候异步加载
- 框架代码,希望能利用浏览器缓存下部分不易变动的代码
懒加载
把不同路由对应的组件分割成不同的代码,然后当路由被访问的时候才加载对应组件。
按需加载拆分:require.ensure()
webpack有代码分割功能。
webpack可以帮我们将代码分成不同的逻辑块,在需要的时候加载这些代码。
require.ensure()是一种使用CommonJS的形式来异步加载模块的策略,在代码中通过require.ensure([<fileurl>])引用模块。
require.ensure(依赖,回调函数,[chunkName])
CSS拆分:使用css-loader
开发者,可能希望能将工程中的所有引入的 CSS 拆分为单个文件,这样可以利用缓存,且利用 CSS 和 JavaScript 并行加载,来加速 web 应用。