随着项目引入的依赖增多,每次打开项目,无论是开发环境还是生产环境,都逐步变慢。开始没有感觉不明显,随着项目迭代次数增多,网站打开速度有了明显的卡顿感。

外部第三方依赖,一般都是固定的版本,不会随着项目进行而改变,可以利用cdn加载,和浏览器本身的缓存机制实现网站打开速度的提升。

本次优化按照如下步骤进行:

1、外部引入第三方库

将用到的第三方库,都做外部引入

vue.config.js

// from vue import Vue
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
moment: 'moment',
lodash: '_',
echarts: 'echarts'
},


可参考: ​​webpack 外部扩展(Externals)​


2、配置环境变量

2.1、开发环境配置

.env.development

# 环境标识
ENV = 'development'

# 开发环境静态资源cdn地址
VUE_APP_CDN_BASE_URL = "https://mouday.github.io/more-cdn"

2.2、生产环境配置

.env.production

# 环境标识
ENV = 'production'

# 生产环境静态资源cdn地址
VUE_APP_CDN_BASE_URL = "https://mouday.github.io/more-cdn"

可用的公共CDN

  • https://www.bootcdn.cn/
  • https://cdnjs.com/

需要注意的是,公共CDN可能不稳定,我们刚开始就使用了bootcdn作为生产环境的CDN,没想到过了几天网站挂了。

强烈推荐使用自建CDN,保证稳定性。

此处推荐一个CDN模板,可以把需要的第三方依赖下载到项目,自行部署一个静态资源CDN

​https://github.com/mouday/more-cdn​


可参考:​​Vue CLI 模式和环境变量​


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>


模板语法配置可参考:​​Vue CLI HTML 和静态资源​


修改完配置后,重启开发环境

经过这么一折腾,无论是开发环境还是生产环境,性能都有了极大的提升