码迷,mamicode.com
首页 > Web开发 > 详细

webpack异步加载文件的方式

时间:2020-05-15 10:03:52      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:loader   undle   error   console   while   fetch   就是   mod   webp   

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来加载异步文件。

webpack异步加载文件的方式

标签:loader   undle   error   console   while   fetch   就是   mod   webp   

原文地址:https://www.cnblogs.com/mengff/p/12892506.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!