在vue專案中,引入到工程中的所有js、css檔案,編譯時都會被打包進vendor.js,瀏覽器在載入該檔案之後才能開始顯示首屏。若是引入的庫眾多,那麼vendor.js檔案體積將會相當的大,影響首開的體驗。
解決方法是,將引用的外部js、css檔案剝離開來,不編譯到vendor.js中,而是用資源的形式引用,這樣瀏覽器可以使用多個執行緒非同步將vendor.js、外部的js等載入下來,達到加速首開的目的。
外部的庫檔案,可以使用cdn資源,或者別的伺服器資源等。
下面,以引入vue、vuex、vue-router,element為例,說明處理流程。
一、資源引入
二、webpack配置
"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(***)
2.在router的index.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)
注意:new router要改為new vuerouter// 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。注意 這個優化是專案結束時幹的事,不...