SelinaChan 2020-05-15
1. import
import(/* webpackPrefetch: true,webpackChunkName: "yourFileName",webpackPreload: true */ ‘LoginModal‘) import ( /* webpackChunkName: "yourFileName" */ filePath); import ( /* webpackChunkName: "lodash" */ ‘lodash‘).then(({ default: _ }) => { console.log(_) }).catch(error => ‘An error occurred while loading the component‘);
2. require.ensure
//将A单独打包 require.ensure([],()=>{ require(A) },"bundleA"); //将A,B打包到一起,而且从主文件束中拆分出来。但只有 b.js 的内容被执行。a.js //的内容仅仅是可被使用,但并没有被输出。 //想去执行 a.js,我们需要异步地引用它,如 require(‘./a.js’),让它的 JavaScritp 被执行。 require.ensure([A],()=>{ require(B) },bundleAB)
3. bundle-loader
本质上对require.ensure的包装,需要在配置文件中配置,使用不够灵活,对ES6支持也不好,不推荐
webpack所有的异步加载模块方式,都是调用__webpack_require__.e方法,就是requireEnsure方法,使用JSONP来加载异步文件。