• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

import()函数ES2020(ES11)动态引入,与webpack动态加载打包chunk命名结合

互联网 diligentman 2个月前 (02-28) 21次浏览

除了import静态引入之外,还有一个类似函数的动态 import(),它不需要依赖 type="module" 的script标签。

语法

var promise = import("module-name");//这是一个处于第三阶段的提案。

 

下面的是你可能会需要动态导入的场景:

  • 当静态导入的模块很明显的降低了代码的加载速度且被使用的可能性很低,或者并不需要马上使用它。
  • 当静态导入的模块很明显的占用了大量系统内存且被使用的可能性很低。
  • 当被导入的模块,在加载时并不存在,需要异步获取
  • 当导入模块的说明符,需要动态构建。(静态导入只能使用静态说明符)
  • 当被导入的模块有副作用(这里说的副作用,可以理解为模块中会直接运行的代码),这些副作用只有在触发了某些条件才被需要时。(原则上来说,模块不能有副作用,但是很多时候,你无法控制你所依赖的模块的内容)

不要滥用动态导入(只有在必要情况下采用)。静态框架能更好的初始化依赖,而且更有利于静态分析工具和tree shaking发挥作用

关键字import可以像调用函数一样来动态的导入模块。以这种方式调用,将返回一个 promise

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

这种使用方式也支持 await 关键字。

let module = await import('/modules/my-module.js');

 

关于webpack的补充:  

    在使import()函数动态加载文件之后,默认webpack打包出来的文件名是没有规律的数字名文件:

import()函数ES2020(ES11)动态引入,与webpack动态加载打包chunk命名结合

当你想自定义其名称时,使用这个注释既可/* webpackChunkName: “” */,号称是Magic Comments(魔术注释法)。

Webpack通过增加内联注释来告诉运行时,该有怎样的行为。通过向import中添加注释,我们可以执行诸如命名chunk或选择不同模式之类的操作。

webpackChunkName,其实就是对chunkFilename定义时[name]值的改写,/* webpackChunkName: “hello” */,意味着[name]等于hello。

于是上面的代码就会按照下面的方式来写,打包出来的chunk文件将会出现在plugins文件夹下,名字叫myModule.a2d1d5d8e7d5d4d4d4se.chunk.js。

import()函数ES2020(ES11)动态引入,与webpack动态加载打包chunk命名结合import()函数ES2020(ES11)动态引入,与webpack动态加载打包chunk命名结合

    

展开阅读全文

webpacka2djavascript

© 著作权归作者所有

举报

打赏

0


0 收藏

微信
QQ
微博

分享

作者的其它热门文章

干货满满!10分钟看懂Docker和K8S
解决echarts 无法重新刷新的问题
关于 npm audit fix
用axios.all处理并发请求


喜欢 (0)