在 vue-cli 构建的项目中配置使用资源CDN，加速我们的项目

最新推荐文章于 2023-09-27 17:56:43 发布

东方睡衣

最新推荐文章于 2023-09-27 17:56:43 发布

阅读量811

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/web2022050903/article/details/128332498

版权

本文介绍了如何在 Vue CLI 构建的项目中，通过配置将第三方库排除在打包之外，改由 CDN 加载，以提高应用加载速度。详细讲解了如何配置 externals 字段以排除指定模块，以及如何设置 CDN 链接并在模板中插入资源脚本，以实现资源的外部加载。最后，通过打包分析展示了配置前后的效果。

摘要由CSDN通过智能技术生成

写在前面

出于对网站性能的要求，有时候我们不希望一些比较大的第三方库直接打包到最后的 bundle 中，而会选择在打包的时候忽略他们，并直接使用 CDN 上面的资源。

生产环境中将项目依赖的一些第三方包替换成通过 cdn 方式外部加载，而不是打包到 vender，对于提升应用的加载、响应速度很有意义。

在 vue-cli3 及以后的项目中，相关配置都需要在 vue.config.js 这个文件中进行，如果你没有这个文件请自己新建一个（与 package.json 同级）。

以目前常见的前端项目为例，建议把常用的资源进行 cdn 引用及配置；如：vue、vuex、vue-router、axios、elementUI ...

这里我们首先配置 configureWebpack 的 externals 字段，把不需要打包的资源进行相应的配置。如下所示：

module.exports = {...configureWebpack: {externals: {'vue': 'Vue','element-ui': 'ELEMENT','vue-router': 'VueRouter','vuex': 'Vuex'}},...
}

这里我们排除了 vue，element-ui，vue-router 和 vuex。

关于这个配置怎么写的问题：

以打包时忽略 element-ui 为例，'element-ui' 指的是你 import 语句中 import ElementUI from 'elemen

关注