木灵鱼儿

木灵鱼儿

阅读:124

最后更新:2021/11/10/ 11:54:56

webpack5 externals打包时取消打包指定的库

简单说明

externals这个属性,常用来做cdn的功能,在打包的时候不打包指定的库,比如vue,jquery,然后在html文件部分,手动引入库的cdn链接,但是,你在开发的时候,你还是需要npm或者yarn安装这个库,import引入使用,只是打包的时候会自动剔除。

简单示例

webpack.config.js

module.exports = {
  externals: {
    uikit: "UIkit",
  }
}

可以看到,externals是一个对象,对象里面有key和value,其中key的值就是package.json里面,安装的包的名字。

而value值则有点麻烦,需要知道cdn引入的js文件,它在全局抛出的变量是啥。value就是他的全局变量名。

以UIkit为例,下载他的js文件,可以看到自运行的函数里面这段话。

可以看到,自运行函数传入了一个this,this就是window对象,函数用t参数接收this,然后在后面有一个三元判断,最终给t赋值了一个UIkit属性,这个就是全局变量了,其他的框架也是同理,如果压缩版js看不懂,看不压缩的也是一样的,一般这块函数不会被混淆。

这样我们的key和value就都有了,就能准确的在打包时,忽略不经常更新的库,利用cdn或者其他来提高网页的加载速度,减少首页白屏时间(spa)

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 124

相关文章