随着项目引入的依赖增多，每次打开项目，无论是开发环境还是生产环境，都逐步变慢。开始没有感觉不明显，随着项目迭代次数增多，网站打开速度有了明显的卡顿感。
外部第三方依赖，一般都是固定的版本，不会随着项目进行而改变，可以利用cdn加载，和浏览器本身的缓存机制实现网站打开速度的提升。
本次优化按照如下步骤进行：
1、外部引入第三方库
将用到的第三方库，都做外部引入
vue.config.js
externals: { vue: 'Vue', vuex: 'Vuex', 'vue-router': 'VueRouter', axios: 'axios', moment: 'moment', lodash: '_', echarts: 'echarts' }, 2、配置环境变量
2.1、开发环境配置
.env.development
ENV = 'development' VUE_APP_CDN_BASE_URL = "https://mouday.github.io/more-cdn" 2.2、生产环境配置
.env.production
ENV = 'production' VUE_APP_CDN_BASE_URL = "https://mouday.github.io/more-cdn" 可用的公共CDN
- https://www.bootcdn.cn/
- https://cdnjs.com/
需要注意的是，公共CDN可能不稳定，我们刚开始就使用了bootcdn作为生产环境的CDN，没想到过了几天网站挂了。
强烈推荐使用自建cdn，保证稳定性。
3、配置外部依赖包CDN加载
Vue需要区分开发环境和线上环境，开发环境加载未压缩的代码，便于调试
public/index.html
<% if (ENV = 'development') { %> <script src="<%= VUE_APP_CDN_BASE_URL %>/ajax/libs/vue/2.6.10/vue.js"></script> <% } else { %> <script src="<%= VUE_APP_CDN_BASE_URL %>/ajax/libs/vue/2.6.10/vue.min.js"></script> <% }%> <script src="<%= VUE_APP_CDN_BASE_URL %>/ajax/libs/axios/0.18.1/axios.min.js"></script> <script src="<%= VUE_APP_CDN_BASE_URL %>/ajax/libs/vuex/3.1.0/vuex.min.js"></script> <script src="<%= VUE_APP_CDN_BASE_URL %>/ajax/libs/vue-router/3.0.6/vue-router.min.js"></script> <script src="<%= VUE_APP_CDN_BASE_URL %>/ajax/libs/echarts/4.4.0/echarts.min.js"></script> <script src="<%= VUE_APP_CDN_BASE_URL %>/ajax/libs/Clamp.js/0.5.1/clamp.min.js"></script> <script src="<%= VUE_APP_CDN_BASE_URL %>/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="<%= VUE_APP_CDN_BASE_URL %>/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> 修改完配置后，重启开发环境
经过这么一折腾，无论是开发环境还是生产环境，性能都有了极大的提升
原文链接：https://blog.csdn.net/mouday/article/details/124449320?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934458816782184630950%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934458816782184630950&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-19-124449320-null-null.nonecase&utm_term=%E8%87%AA%E5%BB%BAcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/6462
