Vue项目中通过CDN引入文件并使用

JavaScript09

Vue项目中通过CDN引入文件并使用,第1张

在项目中,一般使用npm拉取包使用,但是有时因为文件过大,加载慢等原因,需要CDN引入外部资源,以 axios 为例,在 index.html 文件中CDN引入

在 build 文件夹中的 webpack.base.conf.js 加入如下配置:

在使用的地方 import 即可,参考 webpack 文档,地址: https://webpack.js.org/configuration/externals/

本文将以ant-design-vue为实验对象,因为CDN引入ant-design-vue前提需要CDN引入Vue,所以项目保持CDN引入Vue

build后文件

查看资源加载及性能

build后文件,对比npm, chunk-vendors.js小了这么多

查看js资源加载和性能

CDN的buildjs包小了,但需要加载引入的js

单从加载时间上来看,还是有一定的优势

CDN引入ant-design-vue后,不能通过/deep/需改样式

需要使用外部.less样式覆盖