webpack4利用import动态加载的一些说明_在if语句中,可以使用import实现动态加载吗-优快云博客

本文介绍了在webpack4中如何使用import进行动态加载。webpack4引入的新特性使得import可以实现动态加载，区别于传统的静态加载方式。通过import()语法，我们可以按需加载模块，减少初始加载负担。示例代码展示了动态加载的用法及其与静态加载的区别。

最近开始学习webpack4, 有一个新功能，是可以用import做动态加载。
ES6的import语法告诉我们，模块只能做静态加载。
所谓静态加载，就是你不能写成如下形式：

let filename  = 'module.js';
import {mod} from './' + filename.

也不能写成如下形式：

if(condition) {
import {mod} from './path1'
} else {
import {mod} from './path2'
}

但是现在有新提案让import进行动态加载，虽然还没有被ECMA委员会批准，但是webpack已经开始用了。

大致用法是这样的：

let filename = 'module.js'; 

import('./' + filename). then(module =>{
    console(module);
}).catch(err => {
    console(err.message); 
});

//如果你知道 export的函数名
import('./' + filename). then(({fnName}) =>{
    console(fnName);
}).catch(err => {
    console(err.message); 
});

//如果你用的是export default function() 
import('./' + filename). then(module =>{
    console(module.default);
}).catch(err => {
    console(err.message); 
});

//或者
import('./' + filename). then(({default:fnName}) =>{
    console(fnName);
}).catch(err => {
    console(err.message); 
});

这里有一点要注意的是：
import的加载是加载的模块的引用。而import()加载的是模块的拷贝，就是类似于require(),怎么来说明？看下面的例子：

module.js 文件：

export let counter = 3;
export function incCounter() {
  counter++;
}

main.js 文件：

let filename = 'module.js'; 
 import('./' + filename).then(({counter, incCounter})=>{
 console.log(counter); //3
 incCounter(); 
 console.log(counter); //3
 });

import {counter, incCounter} from './module.js';
console.log(counter); //3
incCounter();
console.log(counter); //4