vue使用cdn加速優化專案

2021-10-12 23:11:38 字數 535 閱讀 3075

webpack會將所有的依賴包都生成並打包到js/chunk-vendors.97b0334e.js中,這樣會導致這個包的體積過大,在載入的時候會有延時。

解決辦法:

通過externals載入外部cdn資源:

1、複製乙份main.js改名為main-prod.js。注意:這個優化是專案結束時幹的事,不要一開始就進行優化。

2、vue.config.js:(當為發布模式時,使用main-prod.js檔案,並且設定externals)

chainwebpack: config => )

})// 開發模式

config.when(process.env.node_env === 'development', config => )

},

3、public/index.html中引入對應的css檔案和js檔案:

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加速

首先我這裡用的是jsdelivr的cdn加速。進入jsdelivr的官網後,我們可以看見,不僅有npm的加速,還有github,wordpress等等的cdn加速外鏈。下面的搜尋框可以有助於搜尋你想要加速的某個外掛程式 這裡我就不一一舉例了。首先搜尋我們想要加速的外掛程式,這裡我用axios為例 可...