之前对ElementUI项目做过一次优化: ElementUI项目打包vendor的压缩,将一些比较大的chunk-vendor打碎,变成很多很小的chunk-vendor,现在最大的chunk-vendor只有77kb,按道理应该差不多了,奈何网站的服务器在国外,哪怕请求一个几kb的js都很慢,更何况这个项目有一堆的js要请求,导致打开一个页面要好几分钟!!

现在只能在CDN上下功夫了,在 BootCDN上有不少可以用的项目,例如vue,vuex,vue-router等,而且有不同的版本。

首先在你的package.json上找下依赖的库,看看它们的版本:

例如vue的版本为2.6.10,vuex的为3.1.1,然后我们去BootCDN上找到对应的库和版本,然后下载它的链接,将地址下载pulibc下面的index.html中:

在vue.config.js中配置如下:

我们已经在CDN中直接引入了库js,例如https://cdn.bootcss.com/vue/2.6.10/vue.min.js,在页面上我们已经可以直接使用Vue这个全局变量了,那么为什么还要设置externals呢?

externals的作用

首先我们要知道externals的作用是干嘛。在正常情况下,例如import Vue from 'vue'或者let Vue=require('vue')的时候,webpack就会将从node_modules目录下找到vue库的代码,将它的代码复制到你的chunk-vendor中。

假设此时你配置了externals:{'vue': 'Vue'},当它import或者require到vue(注意是小写,externals的key)的时候,不会去node_modules目录下去找项目,而是会添加一个如下的引用(下面的1):

我们可以看到,它返回了一个全局变量Vue(注意是大写,externals的value),而因为我们已经另外引用了vue的库,所以是可以访问Vue这个全局变量的。

因此,我们配置externals的目的是为了可以正常的使用import或者require,不用去动之前的代码,否则的话,我们要将所有的import,require全部去掉,这个比较麻烦,而且是多人开发话或者维护别人代码,那么更麻烦。

将import改成rquire

本来我以为到此就一帆风顺了,但是当我构建项目的时候发现,我打出来的包并没有什么变化!!因为我的项目里面都是用import来引入的,例如import Vue from 'vue'。

后来google了一番,好像说构建的时候import不认externals里面的配置,我们的预期是设置了externals:{'vue': 'Vue'}后,然后import遇到'vue'的时候添加那个返回全局变量的引用。

然后实验了之后,发现在构建打包的时候(在运行的时候是可以的),import会无视externals的配置,依然去node_modules下的目录去找,而require是可以的,因此将项目中的import又变成了require。或许有其他配置可以解决这个问题吧,目前还没发现。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字