按需加载
1 .当执行到另一个文件中的模块时,通过网络请求即时加载对应的异步模块代码,再继续下面的流程
如何判断哪些代码是异步模块
1 .require.ensure API语法标记为异步加载模块
require.ensure([],(require)=>{
let asyncModule=require('./async.js')
})
2 .import语法返回promise,可以用async/await语法,使得像书写同步代码一样,执行异步流程
let asyncModule=async()=>await import('./async')
3 .以上代码会打包成两个chunk文件,分别是main.bundle.js,以及异步模块文件0.bundle.js
4 .webpack实现模块的异步加载有点像jsonp的流程,在主js文件会在head中构建script标签,异步加载模块信息,在使用回调函数webpackJsonCallback,把异步的模块源码同步到主文件中,后续操作异步模块可以像同步模块一样
1 .遇到异步模块时,使用__webpack_require__.e函数把异步代码加载进来.改函数会在html的head中动态增加script标签,src指向异步模块存放的文件
2 .加载的异步模块文件会执行webpackJsonpCallback函数,把异步模块加载到主文件中.
网友评论