前言：
基于Vuecli搭建的vue項目簡單快捷，易于開發。在node.js的加持下你可以更快的引入萬千JavaScript開發庫，僅僅依靠前端就可以實作以前使用後端才能實作的功能，如通過axios便可以快捷的與後端進行資料互動等。
但是vuecli搭建的項目也處在一些不足，在安照vue官方進行開發時往往存在引入JavaScript庫較多，導緻項目過大通路時花費的時間較長，特别在伺服器帶寬較低時就會存在通路時間較長，乃至30s甚至1分鐘以上也是存在的。例如euiadmin的伺服器帶寬是1mbps的在沒有優化前，用Chrome浏覽器通路時間常常為35s以上，經過優化現在通路時間控制在3s左右。
前期準備：
在項目根目錄下建立vue.config.js，這是前期必須要準備的，如果不了解可以前往euiadmin.com官網下載下傳源碼進行檢視。
優化方法：
1、路由懶加載
在router/index.js中采用如下書寫形式，采用resolve進行加載。
{
path: '/module/animate',
name: 'animate',
component: resolve => require(['@/views/module/Animate.vue'], resolve),
meta: {
title: 'Eui動畫',
login_state: true,
vist_label: ['super_admin', 'admin']
},
},
2、子元件懶加載
示例JavaScript代碼：
export default {
components: {
HomeSpace:resolve=>{require(['@/components/home/HomeSpace'],resolve)},
},
};
注意：
使用子元件懶加載在進入首頁時會較快，但是進入相應的子元件時特别是富文本等使用JavaScript庫的子元件時加載時間可能較長，如果您不在乎首頁加載時間可以不使用懶加載。
3、CDN引用加載，減少打包體積加快通路速度
(1)在public/index.html中引用需要引用的内容(以EuiAdmin作為參考)。
(2)在項目根目錄vue.config.js中寫下如下内容。
(1)移除 prefetch 插件，不移除會在通路時加載所有項目内容。
參考代碼：
chainWebpack: config => {
config.plugins.delete('prefetch')
},
(2)去除指定的JavaScript庫不打包。
configureWebpack: { //移除已從cdn引入的元件，不打包以下命名的内容
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'echarts': 'echarts',
'VueCookies': 'VueCookies',
},
},
完整的vue.config.js内容
// Vue.config.js 配置選項
module.exports = {
publicPath: "./",
// 建構時的輸出目錄
outputDir: "dist",
// 放置靜态資源的目錄
assetsDir: "static",
transpileDependencies: [ ],
// 是否為生産環境建構生成 source map？
productionSourceMap: false,
devServer: {
open: true,
host: 'localhost',
port: 8080,
https: false,
//以上的ip和端口是我們本機的;下面為需要跨域的
proxy: { //配置跨域
'/api': {
target: 'http://localhost', //這裡背景的位址模拟的;應該填寫你們真實的背景接口
ws: true,
changOrigin: true, //允許跨域
pathRewrite: {
'^/api': '' //請求的時候使用這個api就可以
}
}
}
},
configureWebpack: { //移除已從cdn引入的元件，不打包以下命名的内容
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'echarts': 'echarts',
'VueCookies': 'VueCookies',
},
},
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
},
}
注意事項：
1、 在使用子元件懶加載時需要在整個項目中都要使用，不然會導緻加載時間過長。
2、 Cdn加載時一定要配合vue.config.js二者互相使用否則不生效。
結語：
具體的代碼你可以前往euiadmin.com下載下傳源碼進行參考，如果你要運作euiamdin項目那麼你需要在自己電腦搭建運作環境(node.js+vuecli)。