React 出海應用 首屏加載時間從20S降到10S如下 血淚史

最近在作一個基於mobile app的漫畫的項目，面向印尼市場。

網址是www.mangaya.mobi

上線後，基本測試沒有問題，打開也挺順暢。可是google analytics卻反饋加載平均19s！

OMG～～因而開展了一系列的探索。。

首先說說技術棧，用的是create-react-app,redux,react-router,webpack4,babel7.

咱們知道網頁的加載流程大體以下：

那麼優化網頁的加載速度，最本質的方式就是，1.減小請求數量 2.縮小請求體積大小。

減小請求數量

1. 用base64減小沒必要要的網絡請求，實際上create-react-app已經自動幫咱們作了。

2. 引入文件使用React.Lazy

3. 圖片延遲加載,使用react-lazyload，很是方便。

   

   

縮小請求體積大小

1. 後臺返回的圖片使用webp格式，縮小體積。可是因爲webp目前只被安卓支持，因此咱們目前的方案是後端獲取請求的user-agent信息，判斷若是是ios的話，就返回jpg格式的圖片，若是是安卓的話，就返回webp格式。這主要使用在banner圖。

2. webpack 處理

• 2.1 build的時候去掉map文件，減小沒必要要的文件以及防止被查看源碼

  

• 2.2 壓縮css和js，實際上create-react-app已經自動幫咱們作了。uglifyjs-webpack-plugin使用的uglify-es已經再也不被維護，取而代之的是一個名爲terser的分支。

  

• 2.3 默認splitChunk是chunks: 'all'，可是這樣會致使生成一個很大的vendor文件，能夠改一下，將node文件抽離出來。

splitChunks: {
        // chunks: 'all',
        chunks: "all",
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(
                /[\\/]node_modules[\\/](.*?)([\\/]|$)/
              )[1];

              // npm package names are URL-safe, but some servers don't like @ symbols return `npm.${packageName.replace("@", "")}`; } } }, name: false }, 複製代碼

這樣雖然總的項目大小變大了，可是因爲vendor文件被拆分紅多個文件，根據http1.1或者http2的協議，瀏覽器資源獲取是能夠多個並行的，配合cdn，這樣請求資源，反而更快。

• 2.4 Babel polyfill的按需加載,直接在package.json配置就行了，因爲須要支持的機子比較低端，因此設定爲支持>0.02%的機型。可參考

"browserslist": [
    ">0.02%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
複製代碼

3. gzip壓縮 若是瀏覽器支持gzip壓縮，在發送請求的時候，請求頭中會帶有Accept-Encoding:gzip。而後服務器會將原始的response進行gzip壓縮，並將gzip壓縮後的response傳輸到瀏覽器，緊接着瀏覽器進行gzip解壓縮，並最終反饋到網頁上。

資源cdn加速

將靜態服務器改爲印尼的服務器，明顯dns以及靜態資源的傳輸加快。最後就是cdn加速靜態資源了，我把npm包的js都放到cdn上了，以後還能夠配置多路cdn等策略。

4.靜態資源緩存 加入pwa的service worker

5.字體 因爲字體通常比較大，使用 font-display: swap；能夠先讓用戶看到本地字體顯示出內容來先，等字體加載下來了，再進行替換。

@font-face {
  font-family: 'Arvo';
  font-display: swap;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
複製代碼

詳細可查看font-display。

總結

通過一段時間的努力，成功將首次加載時間從19秒變成10秒如下！仍須要繼續。。。

同時咱們還招募了志願者幫咱們測試嘻嘻嘻

固然這只是首次的加載的時間問題，後續還有觀看漫畫的優化工做，以及支持http2.0，而後將vendor文件拆分紅多個js文件加速加載等。