資訊專欄INFORMATION COLUMN
摘要：凡是做的項目，特別是移動端的項目，首屏加載速度必定是一個繞不過去的話題。大家知道這些依賴庫的文件都會被一起打包到那個文件里面，如果這些你的第三方依賴庫很多，很大的話，那就會導(dǎo)致這個文件很大，那首屏加載的速度肯定會被拖慢。
凡是做SPA的項目，特別是移動端的SAP項目，首屏加載速度必定是一個繞不過去的話題。接下來我就我們項目里的一些實踐來做一下總結(jié)。希望拋磚引玉，如果各位有更好的方案，不吝賜教。
1: 針對第三方j(luò)s庫的優(yōu)化
我們項目里用到的第三方j(luò)s庫主要有：vue, vue-router, vuex, axio, 我們還用到了qiniu。大家知道這些依賴庫的js文件都會被一起打包到vender那個js文件里面，如果這些你的第三方依賴庫很多，很大的話，那就會導(dǎo)致vender這個文件很大，那首屏加載的速度肯定會被拖慢。
針對這個問題我們的解決方案是，用文檔的cdn文件代替，而不用打包到vender里面去。具體的做法是：
1: 在index.html里面引入依賴庫js文件
// index.html
2: 去掉第三方j(luò)s的import,因為在第一步已經(jīng)通過script標(biāo)簽引用進來了。
3: 把第三方庫的js文件從打包文件里去掉
這一步的做法就是利用webpack的externals。具體做法就是在 build/webpack.base.conf.js文件的module里面與rules同層加入externals：
2: 利用vue-router進行頁面的懶加載（lazy load）
這里的頁面的懶加載是指，假如我現(xiàn)在訪問A頁面，只會去請求A頁面里的東西，其他頁面的東西不會去請求。
具體怎么做，vue-router的官網(wǎng)都寫得很清楚了,有需要的去看一下就懂了：
通過vue-router實現(xiàn)頁面的懶加載
3: 圖片資源的壓縮
嚴(yán)格說來這一步不算在編碼技術(shù)范圍內(nèi)，但是卻對頁面的加載速度影響很大，特別是對于移動端的項目來說。
對于非logo的圖片文件，讓UI設(shè)計師提供jpg格式的，不要用png.
對于所有的圖片文件，都可以在一個叫tinypng的網(wǎng)站上去壓縮一下。網(wǎng)址：
https://tinypng.com/
成果總結(jié)：
通過以上的那些方案，再加上我們的代碼本來就是部署在CDN上面的，我們在移動端（微信，QQ，瀏覽器等）基本都能達(dá)到秒開的效果。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89128.html
摘要：如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時候才加載對應(yīng)組件，這樣就更加高效了。 前言 之前用vuecli做了個博客，是一個單頁面項目，大概有十個路由直接npm run build打包出來，有一個1M的巨大js文件 showImg(https://segmentfault.com/img/bVbtXVk?w=1516&h=218); 先掛載到服務(wù)器上試試好家伙...
摘要：開發(fā)完了，并部署到服務(wù)器后，就遇到了一個非常明顯的問題。所以可以利用按需加載來進一步縮小文件的體積。另外圖片還可以去下面這個網(wǎng)上壓縮一下經(jīng)過上述的幾步，首頁的加載速度已經(jīng)比較快了，項目經(jīng)理也比較滿意。初步結(jié)束了首頁加載慢的問題的研究。 本次開發(fā)的項目中使用了vue2.5.2和自帶的vue-cli生成了前端的基本架構(gòu)。隨后在項目開發(fā)當(dāng)中，添加了自己寫的UI組件，和復(fù)雜的業(yè)務(wù)邏輯。整個項目...
摘要：原文首發(fā)代碼壓縮如果你用的是服務(wù)器，請修改配置文件其他類似在里加入開啟或者關(guān)閉模塊，這里使用表示啟動設(shè)置允許壓縮的頁面最小字節(jié)數(shù)默認(rèn)值是，不管頁面多大都壓縮設(shè)置系統(tǒng)獲取幾個單位的緩存用于存儲的壓縮結(jié)果數(shù)據(jù)流代表以為單位，按照原始數(shù)據(jù)大 原文首發(fā)： https://shuirong.github.io/ 1.代碼壓縮(gzip) 如果你用的是nginx服務(wù)器，請修改配置文件(其他web ...
摘要：為了讓事情更簡單，允許將組件定義為一個工廠函數(shù)，動態(tài)地解析組件的定義。只在組件需要渲染時觸發(fā)工廠函數(shù)，并且把結(jié)果緩存起來，用于后面的再次渲染。 庫使用情況 vue vue-router axios muse-ui material-icons vue-baidu-map 未優(yōu)化前 首先我們在正常情況下buildshowImg(https://segmentfault.com/img...
摘要：中在性能優(yōu)化所做的努力，也大抵圍繞著這兩個大方向展開。因此，將依賴模塊從業(yè)務(wù)代碼中分離是性能優(yōu)化重要的一環(huán)。大型庫是否可以通過定制功能的方式減少體積。這又違背了性能優(yōu)化的基礎(chǔ)。接下來可以抓住一些細(xì)節(jié)做更細(xì)的優(yōu)化。中，為默認(rèn)啟動這一優(yōu)化。 前言：在現(xiàn)實項目中，我們可能很少需要從頭開始去配置一個webpack 項目，特別是webpack4.0發(fā)布以后，零配置啟動一個項目成為一種標(biāo)配。正因為...
閱讀 3670·2021-09-22 15:15
閱讀 3572·2021-08-12 13:24
閱讀 1319·2019-08-30 15:53
閱讀 1830·2019-08-30 15:43
閱讀 1191·2019-08-29 17:04
閱讀 2802·2019-08-29 15:08
閱讀 1593·2019-08-29 13:13
閱讀 3093·2019-08-29 11:06
