在vue專案中，引入到工程中的所有js、css檔案，編譯時都會被打包進vendor.js，瀏覽器在載入該檔案之後才能開始顯示首屏。若是引入的庫眾多，那麼vendor.js檔案體積將會相當的大，影響首開的體驗。
解決方法是，將引用的外部js、css檔案剝離開來，不編譯到vendor.js中，而是用資源的形式引用，這樣瀏覽器可以使用多個執行緒非同步將vendor.js、外部的js等載入下來，達到加速首開的目的。
外部的庫檔案，可以使用cdn資源，或者別的伺服器資源等。
下面，以引入vue、vuex、vue-router,element為例，說明處理流程。
一、資源引入
"utf-8"
>
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name=
"viewport"
>
"stylesheet" href=
"">
"stylesheet" href=
"">
demo<
/title>
<
/head>
>
<
/div>
<
!-- built files will be auto injected --
>
"">
<
/script>
"">
<
/script>
"">
<
/script>
<
/body>
<
/html>
在bulid/webpack.base.conf.js檔案中，增加externals，將引用的外部模組匯入，build的時候不打包，如下：
module.exports =
, externals:
,
格式為 『vue』 : 『vue』, 其中，前面vue表示要引入的資源的名字，後面vue表示該模組提供給外部引用的名字，由對應的庫自定，不可以更改。例如，vue為vue，vue-router為vuerouter.
三、注釋掉/刪除之前的引用
1、在main.js中去掉import和vue.use(***)
// import vue from 'vue'
import router from
'./router'
// import elementui from './element-ui/index'
// import 'element-ui/lib/theme-chalk/display.css'
// vue.use(elementui)
// import vue from 'vue'
// import router from 'vue-router'
// vue.use(router)
export
default
newvuerouter(}
)
cdn載入vue很慢 vue專案 開啟優化之旅
vue專案打包後檔案總是很大，首先得確定到底是 導致了首屏渲染如此之慢？通過查一些資料，我們從以下幾個方面去優化 開啟gzip壓縮功能 引入cdn 路由懶載入 某些第三方元件按需載入而不是全部載入 較小的資源用base64嵌入src中，減少http請求 gzip壓縮 這個是需要後端配合設定的，首先我...
Vue專案使用CDN優化載入
在vue專案中，引入到工程中的所有js css檔案，編譯時都會被打包進vendor.js，瀏覽器在載入該檔案之後才能開始顯示首屏。若是引入的庫眾多，那麼vendor.js檔案體積將會相當的大，影響首開的體驗。解決方法是，將引用的外部js css檔案剝離開來，不編譯到vendor.js中，而是用資源的...
vue使用cdn加速優化專案
webpack會將所有的依賴包都生成並打包到js chunk vendors.97b0334e.js中，這樣會導致這個包的體積過大，在載入的時候會有延時。解決辦法 通過externals載入外部cdn資源 1 複製乙份main.js改名為main prod.js。注意 這個優化是專案結束時幹的事，不...