vue專案打包後檔案總是很大，首先得確定到底是**導致了首屏渲染如此之慢？
通過查一些資料，我們從以下幾個方面去優化：
開啟gzip壓縮功能
引入cdn
路由懶載入
某些第三方元件按需載入而不是全部載入
較小的資源用base64嵌入src中，減少http請求
gzip壓縮
這個是需要後端配合設定的，首先我們來了解一下什麼是gzip？
重啟服務，觀察網路面板裡面的response header，如果看到如下紅圈裡的字段則表明gzip開啟成功
引入cdn
cdn(內容分發網路)，是一種公共服務，他本身有很多臺位於不同地域、接入不同運營商的伺服器，而所謂的使用cdn實質上就是讓cdn作為**的門面，使用者訪問到的是cdn伺服器，而不是直接訪問到**。由於cdn內部對tcp的優化、對靜態資源的快取、預取，加上使用者訪問cdn時，會被智慧型地分配到最近的節點，降低大量延遲，讓訪問速度可以得到很大提公升乙個原則是盡量將比較大的第三方庫放到cdn上去以減少請求時間，
在我的專案中，我將vue,vuex,vue-router,vant都放到了cdn上，具體操作是開啟bootcdn 或者然後搜尋關鍵字並copy鏈結貼上到index.html的body閉合標籤前，如下圖
注意選取min.js(體積最小),然後在webpack.base.conf.js裡設定externals選項，目的是不打包這些選項,由於index.html中script的引入，比如vue就會有乙個全域性變數vue存在，因此這裡external的value就是vue
cdn使用後優勢是巨大的，觀察network面板，時間幾乎都在50ms以下
路由懶載入
路由懶載入也叫延遲載入，即在需要的時候進行載入，隨用隨載。像vue這種單頁面應用，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，時間過長，會出現長時間的白屏，即使做了loading也是不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用時。
vue官網的示例如下，採用非同步元件和webpack的code-splitting結合
因此在專案中，進入router的index.js中，將原來的import comp from '@/component/***'改為如下,vue-router的配置項還是保持不變
第三方按需載入
這個在另乙個專案裡面用到了，專案裡面使用的echarts，只用到了乙個柱狀圖元件，其餘的都沒有用到，但是這樣import後打包時卻會把整個echarts都打入包內，造成空間浪費
import echarts from 'echarts轉base64
小可以轉為base64字串然後嵌入img的src中，節省http請求數量,webpack中用url-loader處理,limit控制了轉base64的閾值，小於該值就轉base64
優化後效能
經過上述優化後，首頁開啟時間迅速下降，domcontentloaded用時不到10s，load完全載入用時不到4s，耗時較多的是幾張背景大圖，本來體積就大，後續考慮放到cdn上。
ps：webpack-bundle-analyzer是神器，能夠有效分析出包占用的體積情況~下圖是最終優化後的包組成結構圖，最初打包的結構圖比下圖大很多，主要多了vue,vue-router,vuex模組。
整個優化就完成啦~
恭喜你，又掌握了乙個新技能~
Vue專案使用CDN優化載入
在vue專案中，引入到工程中的所有js css檔案，編譯時都會被打包進vendor.js，瀏覽器在載入該檔案之後才能開始顯示首屏。若是引入的庫眾多，那麼vendor.js檔案體積將會相當的大，影響首開的體驗。解決方法是，將引用的外部js css檔案剝離開來，不編譯到vendor.js中，而是用資源的...
Vue專案使用CDN優化載入
在vue專案中，引入到工程中的所有js css檔案，編譯時都會被打包進vendor.js，瀏覽器在載入該檔案之後才能開始顯示首屏。若是引入的庫眾多，那麼vendor.js檔案體積將會相當的大，影響首開的體驗。解決方法是，將引用的外部js css檔案剝離開來，不編譯到vendor.js中，而是用資源的...
vue 專案通過cdn載入庫減小bundle體積
通常情況下通過vue cli建立的專案，webpack打包的時候會把vue,vuex,vue router,axios等常用庫打包進去，這無疑會使打包後的體積變大。有沒有辦法不把這些依賴的庫檔案打包進去？我們可以厲害webpack 的配置項externals 來進行配置，不讓把這些庫檔案打包進去，而...