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

JavaScript018

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样式覆盖