目錄

• 一、元件非同步載入
• 二、路由懶載入
• 三、Element按需載入
• 四、gzip
• 五、CDN引入（寫完文章後看到的，自己還沒有驗證）
• 參考文章

資源大小是減小的很明顯的，我就通過這篇文章來分享且記錄一下，有說的不對的還請大家留言告訴我，謝謝~

先放一張沒有做優化的資源大小的圖片:

可以注意一下此時資源的大小和數量，後面我們會有明顯的變化。而時間，變化的程度沒有資源大小那麼明顯。程式碼都是在虛機上執行的，時間比實機上面長了一些。

一、元件非同步載入

什麼是元件的非同步載入呢？換個說法就是按需引入。

在大型應用中，我們可能需要將應用分割成小一些的程式碼塊，並且只在需要的時候才從伺服器載入一個模組。為了簡化，Vue 允許你以一個工廠函式的方式定義你的元件，這個工廠函式會非同步解析你的元件定義。Vue 只有在這個元件需要被渲染的時候才會觸發該工廠函式，且會把結果快取起來供未來重渲染。

開始學習vue的時候，我們都是通過import引入元件，然後在components中使用元件。
程式碼如下：

import EventCalendar from '@/components/EventCalendar'
 
;
export default {
	...
	components: {
		EventCalendar
	}
	...
}

如果我們非同步載入元件，那麼首頁請求的到資源就會相應的減少，因為它只在需要的時候才從伺服器載入一個模組。
非同步載入元件的程式碼：

export default {
	...
	components: {
		EventCalendar: () => import('@/components/EventCalendar'),	// 非同步元件，按需引入。載入哪里哪里會先顯示
	}
	...
};

這一步的截圖我沒有單獨截下來，我會放在接下來的第二步中來展示。不過我的demo這一二步的效果並不明顯，因為我的首頁和我的其他路由下的元件只更換了兩個元件，如果區別很大的話，效果應該會明顯一些。

給出官網的連結，有興趣的朋友可以仔細看一下。

二、路由懶載入

當打包構建應用時，Javascript 包會變得非常大，影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了。

同樣的，先貼出剛開始學習的時候寫vue-router的寫法：

import Vue from 'vue';
import Router from 'vue-router';
import Portal from '@/components/Portal';

Vue.use(Router);

export default new Router({
	routes: [
		{
			path: '/',
			name: 'portal',
			component: Portal
		}
});

然後按照官方的寫法做路由懶載入:

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
	routes: [
		{
			path: '/',
			name: 'portal',
			component: resolve => require(['@/components/Portal'], resolve)
		}
});

那麼我們來看一下做完一二步處理的效果：

沒錯，在我這裡資源的大小居然沒有任何變化，依然是1.1m，因為我做了這些處理以後，其實首頁還是載入差不多的東西，只少載入了一個元件而已，所以看不太出來大小的區別。（看到這裡別放棄，後面做完以後，會有很大區別的！）

但是，我們可以看到資源的數量增加了，因為我們做了元件的按需引入和路由的懶載入，這時webpack就不會把我們自己寫的程式碼都打包到app.js裡面了，而是分出了1,2,3…若干個js，在需要的時候才載入它們。當我們的網站做複雜了以後，就應該會看出區別來了。

而此時的時間上區別也不大，甚至比剛才沒做處理的時間還稍微的長了那麼一丟丟，但是DOMContentLoaded少的還是挺明顯的。

還是附上官網的連結，大家有興趣進去看一下~

三、Element按需載入

我們很可能會用到element或者是Mint UI這種庫，如果它正好支援按需載入就最好了，通過按需載入庫的元件，我們可以大大減少資源的大小~
這裡我就不再放程式碼了，直接看官網就可以了，注意.babelrc一定要修改對啊，不然找不到各個元件對應的.css檔案。
直接放效果圖：

效果槓槓的，直接從1.1m幹到了746KB，時間上也能看到減少了一些。資源數量沒變，還是打包到了vendor.js裡面，可以看出來，vendor.js瘦身了很多。
最後，還有一步殺招，效果相當驚豔，我們繼續談。

四、gzip

這裡我用的是nginx。
我們找到nginx中的 conf資料夾 -> nginx.conf中的server，做如下修改

http {
...
	gzip  on;  //把原本的gzip的#註釋去掉 
	gzip_static on;
	gzip_buffers 4 16k;
	gzip_comp_level 5;
	gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-http-php image/jpeg image/gif image/png;
	
	server {
		listen       7077;	
		...
		location /api {						
			rewrite ^/api/(.*)$ /$1 break;
			proxy_pass http://10.200.9.74:8088;
		}
	}
}

然後來看看效果：

270KB。從1.1m就這麼簡單的瘦身到了270KB。雖然時間上面變化並不大，但是DOMContentLoaded的變化還是挺明顯的。

如果沒搞過nginx想簡單的弄一下nginx，可以看一下我的另一篇關於nginx的。我也是為了搞這個gzip才接觸的nginx的，裡面簡單的寫了一下我用nginx弄這個Vue專案的配置過程。

至此，Vue的首頁優化就完工了，首頁白屏的問題，依然還存在，但是稍微的好了一些。
我們可以再通過骨架屏等手段來完善了，如果可以用SSR那就更好了。

這裡推薦另一篇文章，他裡面的第二點是寫在webpack壓縮打包時的優化，可以節約大量的時間。

五、CDN引入（寫完文章後看到的，自己還沒有驗證）

這個是在我寫完這篇文章以後看到的，因為工作只有內網，我自己暫時還沒有嘗試效果能有多好。
文章在這裡：Vue首頁載入速度優化，大家可以用起來看看效果

感謝大家的閱讀~

參考文章

vue首屏載入優化
Vue官網
Vue-Router官網
Element