vue項目首頁加載速度優化

rickchen 發布于2019-08-21 17:06 / 3276人閱讀

摘要：凡是做的項目，特別是移動端的項目，首屏加載速度必定是一個繞不過去的話題。大家知道這些依賴庫的文件都會被一起打包到那個文件里面，如果這些你的第三方依賴庫很多，很大的話，那就會導致這個文件很大，那首屏加載的速度肯定會被拖慢。

凡是做SPA的項目，特別是移動端的SAP項目，首屏加載速度必定是一個繞不過去的話題。接下來我就我們項目里的一些實踐來做一下總結。希望拋磚引玉，如果各位有更好的方案，不吝賜教。

1: 針對第三方js庫的優化

我們項目里用到的第三方js庫主要有：vue, vue-router, vuex, axio, 我們還用到了qiniu。大家知道這些依賴庫的js文件都會被一起打包到vender那個js文件里面，如果這些你的第三方依賴庫很多，很大的話，那就會導致vender這個文件很大，那首屏加載的速度肯定會被拖慢。

針對這個問題我們的解決方案是，用文檔的cdn文件代替，而不用打包到vender里面去。具體的做法是：

1: 在index.html里面引入依賴庫js文件

 // index.html

2: 去掉第三方js的import,因為在第一步已經通過script標簽引用進來了。

3: 把第三方庫的js文件從打包文件里去掉

這一步的做法就是利用webpack的externals。具體做法就是在 build/webpack.base.conf.js文件的module里面與rules同層加入externals：

2: 利用vue-router進行頁面的懶加載（lazy load）

這里的頁面的懶加載是指，假如我現在訪問A頁面，只會去請求A頁面里的東西，其他頁面的東西不會去請求。
具體怎么做，vue-router的官網都寫得很清楚了,有需要的去看一下就懂了：
通過vue-router實現頁面的懶加載

3: 圖片資源的壓縮
嚴格說來這一步不算在編碼技術范圍內，但是卻對頁面的加載速度影響很大，特別是對于移動端的項目來說。
對于非logo的圖片文件，讓UI設計師提供jpg格式的，不要用png.
對于所有的圖片文件，都可以在一個叫tinypng的網站上去壓縮一下。網址：
https://tinypng.com/

成果總結：
通過以上的那些方案，再加上我們的代碼本來就是部署在CDN上面的，我們在移動端（微信，QQ，瀏覽器等）基本都能達到秒開的效果。

云服務器 GPU云服務器云服務器搭建vue項目騰訊云服務器部署vue項目 vue項目放到云服務器上阿里云服務器搭建vue項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89128.html

提升90%加載速度——vuecli下的首屏性能優化

摘要：如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。前言之前用vuecli做了個博客，是一個單頁面項目，大概有十個路由直接npm run build打包出來，有一個1M的巨大js文件 showImg(https://segmentfault.com/img/bVbtXVk?w=1516&h=218); 先掛載到服務器上試試好家伙...

dreamtecher 2019-08-23 18:09 評論0 收藏0
vue2首頁加載慢的問題

摘要：開發完了，并部署到服務器后，就遇到了一個非常明顯的問題。所以可以利用按需加載來進一步縮小文件的體積。另外圖片還可以去下面這個網上壓縮一下經過上述的幾步，首頁的加載速度已經比較快了，項目經理也比較滿意。初步結束了首頁加載慢的問題的研究。本次開發的項目中使用了vue2.5.2和自帶的vue-cli生成了前端的基本架構。隨后在項目開發當中，添加了自己寫的UI組件，和復雜的業務邏輯。整個項目...

canopus4u 2019-08-22 16:11 評論0 收藏0
Vue SPA(單頁應用)首屏優化實踐

摘要：原文首發代碼壓縮如果你用的是服務器，請修改配置文件其他類似在里加入開啟或者關閉模塊，這里使用表示啟動設置允許壓縮的頁面最小字節數默認值是，不管頁面多大都壓縮設置系統獲取幾個單位的緩存用于存儲的壓縮結果數據流代表以為單位，按照原始數據大原文首發：　https://shuirong.github.io/ 1.代碼壓縮(gzip) 如果你用的是nginx服務器，請修改配置文件(其他web ...

wall2flower 2019-08-21 11:41 評論0 收藏0
vue首屏加載優化

摘要：為了讓事情更簡單，允許將組件定義為一個工廠函數，動態地解析組件的定義。只在組件需要渲染時觸發工廠函數，并且把結果緩存起來，用于后面的再次渲染。庫使用情況 vue vue-router axios muse-ui material-icons vue-baidu-map 未優化前首先我們在正常情況下buildshowImg(https://segmentfault.com/img...

Kaede 2019-08-20 17:44 評論0 收藏0
淺談webpack4.0 性能優化

摘要：中在性能優化所做的努力，也大抵圍繞著這兩個大方向展開。因此，將依賴模塊從業務代碼中分離是性能優化重要的一環。大型庫是否可以通過定制功能的方式減少體積。這又違背了性能優化的基礎。接下來可以抓住一些細節做更細的優化。中，為默認啟動這一優化。前言：在現實項目中，我們可能很少需要從頭開始去配置一個webpack 項目，特別是webpack4.0發布以后，零配置啟動一個項目成為一種標配。正因為...

leanxi 2019-08-26 13:25 評論0 收藏0