APP
隨著項(xiàng)目引入的依賴增多，每次打開項(xiàng)目，無論是開發(fā)環(huán)境還是生產(chǎn)環(huán)境，都逐步變慢。開始沒有感覺不明顯，隨著項(xiàng)目迭代次數(shù)增多，網(wǎng)站打開速度有了明顯的卡頓感。
外部第三方依賴，一般都是固定的版本，不會(huì)隨著項(xiàng)目進(jìn)行而改變，可以利用cdn加載，和瀏覽器本身的緩存機(jī)制實(shí)現(xiàn)網(wǎng)站打開速度的提升。
本次優(yōu)化按照如下步驟進(jìn)行：
1、外部引入第三方庫
將用到的第三方庫，都做外部引入
vue.config.js
// from vue import Vue
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
moment: 'moment',
lodash: '_',
echarts: 'echarts'
},
可參考: ??webpack 外部擴(kuò)展(Externals)??
2、配置環(huán)境變量
2.1、開發(fā)環(huán)境配置
.env.development
# 環(huán)境標(biāo)識(shí)
ENV = 'development'
# 開發(fā)環(huán)境靜態(tài)資源cdn地址
VUE_APP_CDN_BASE_URL = "https://mouday.github.io/more-cdn"
2.2、生產(chǎn)環(huán)境配置
.env.production
# 環(huán)境標(biāo)識(shí)
ENV = 'production'
# 生產(chǎn)環(huán)境靜態(tài)資源cdn地址
VUE_APP_CDN_BASE_URL = "https://mouday.github.io/more-cdn"
可用的公共CDN
- https://www.bootcdn.cn/
- https://cdnjs.com/
需要注意的是，公共CDN可能不穩(wěn)定，我們剛開始就使用了bootcdn作為生產(chǎn)環(huán)境的CDN，沒想到過了幾天網(wǎng)站掛了。
強(qiáng)烈推薦使用自建CDN，保證穩(wěn)定性。
此處推薦一個(gè)CDN模板，可以把需要的第三方依賴下載到項(xiàng)目，自行部署一個(gè)靜態(tài)資源CDN
??https://github.com/mouday/more-cdn??
可參考：??Vue CLI 模式和環(huán)境變量??
3、配置外部依賴包CDN加載
Vue需要區(qū)分開發(fā)環(huán)境和線上環(huán)境，開發(fā)環(huán)境加載未壓縮的代碼，便于調(diào)試
public/index.html
<!-- 開發(fā)環(huán)境加載未打包依賴 -->
<% 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 和靜態(tài)資源??
修改完配置后，重啟開發(fā)環(huán)境
經(jīng)過這么一折騰，無論是開發(fā)環(huán)境還是生產(chǎn)環(huán)境，性能都有了極大的提升
本文摘自 ：https://blog.51cto.com/u
