React + antd + webpack打包優化，首屏加載優化

1. 業務js按需加載

實現頁面代碼分割、按需加載 —— react-loadable 實現路由代碼分割

具體使用：

npm install react-loadable --save複製代碼

在.babelrc文件中配置：

{
    "plugins": [
        ...,
        "syntax-dynamic-import",
    ],
},複製代碼

在路由文件中：

import Loadable from 'react-loadable';
import load from '../src/util/load'; // 頁面加載須要的loading動畫複製代碼

組件引用由原來的

import Home from '../src/app/home';複製代碼

變爲

const Home = Loadable({  
    loader: () => import('../src/app/home'),  
    loading: load,  
    delay: 300,  // 延時毫秒數後加載渲染loading組件，默認值是200
});複製代碼

util/load.js動畫

import React from 'react';
import { Spin } from 'antd';

export default function Loading({ error, pastDelay }) {  
    if (error) {    
        return null;  
    }  
    if (pastDelay) {    
        return (      
            <div 
                className="loading-wrap"
                style={{          
                    position: 'absolute',          
                    left: 0,          
                    right: 0,          
                    top: 0,          
                    bottom: 0,          
                    display: 'flex',          
                    justifyContent: 'center',          
                    alignItems: 'center',
                  }}      
              >        
                  <Spin size="large" />      
               </div>    
        );  
    }  
    return null;
}複製代碼

2. webpack-bundle-analyzer（可視化視圖查看器）

查看 webpack 打包後全部組件與組件間的依賴關係，針對多餘的包文件過大。

安裝webpack-bundle-analyzer插件

npm install --save-dev webpack-bundle-analyzer複製代碼

在須要查看webpack 打包後全部組件與組件間的依賴關係的webpack配置文件加上：

webpack.prod.js引入：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;複製代碼

webpack.prod.js配置：plugins中加上

plugins: [    ...,
    new BundleAnalyzerPlugin()
],複製代碼

運行：

npm run build複製代碼

最後輸出：

發現 antd中的icon組件以及本地引入的moment打包出來過大。

3. 針對moment打包過大

百度一下，你就知道~~~

webpack中的externals屬性-------具體瞭解

防止將某些import的包打包到bundle中，而是在運行時再去從外部獲取這些。 

具體配置以下：

webpack.prod.js文件中：

externals: {    
    // 'react': 'React',    
    // 'mobx': 'mobx', // cdn引入umd版本，，不然報錯    
    // 'mobx-react': 'mobxReact',    
    'moment': 'moment',    
    // 'react-dom': 'ReactDOM',    
    // 'react-router-dom': 'ReactRouterDOM'  
},複製代碼

若是以爲被註釋掉的import包有必要從外部獲取則把註釋去掉。

在打包的html模板文件中加上：

<!-- <script src="https://cdn.bootcss.com/react/16.8.1/umd/react.production.min.js"></script>  
<script src="https://cdn.bootcss.com/react-dom/16.8.1/umd/react-dom.production.min.js"></script>  
<script src="https://cdn.bootcss.com/react-router-dom/4.4.0-beta.6/react-router-dom.min.js"></script>  
<script src="https://cdn.bootcss.com/mobx/5.9.0/mobx.umd.min.js"></script>  <script src="https://cdn.bootcss.com/mobx-react/5.4.3/index.min.js"></script> -->  
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script> 
<script src="https://cdn.bootcss.com/moment.js/2.24.0/locale/zh-cn.js"></script>複製代碼

運行：

npm run build複製代碼

最後輸出：

發現打包文件體積變小，moment不在打包文件中。

4. 針對icon組件打包過大

個人工程中並無單獨用到icon圖標，可是antd打包出來仍然有icon文件，爲何呢？

緣由就是antd組件中的一些組件會默認引進一些icon，好比Select,DatePicker等等組件。只要工程中引入了這些含有內置icon的組件，antd都會打包icon組件。具體解決方法官方還未給出，但有暫時的解決方法。Svg icons make bunlde size too large #12011

5. 服務器端使用gzip

來自大神的解釋：

GZIP最先由Jean-loup Gailly和Mark Adler建立，用於UNIX系統的文件壓縮。咱們在Linux中常常會用到後綴爲.gz的文件，它們就是GZIP格式的。現今已經成爲Internet 上使用很是廣泛的一種數據壓縮格式，或者說一種文件格式。HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術。大流量的WEB站點經常使用GZIP壓縮技術來讓用戶感覺更快的速度。這通常是指WWW服務器中安裝的一個功能,當有人來訪問這個服務器中的網站時,服務器中的這個功能就將網頁內容壓縮後傳輸到來訪的電腦瀏覽器中顯示出來.通常對純文本內容可壓縮到原大小的40％.這樣傳輸就快了,效果就是你點擊網址後會很快的顯示出來.固然這也會增長服務器的負載. 通常服務器中都安裝有這個功能模塊的。

express啓用gzip:

npm install compression複製代碼

app.js中

var compression = require('compression');
app.use(compression()); // 使用在其它中間件前面複製代碼

啓用成功，沒錯，就是這麼簡單~~

總結：react的優化暫時就這樣了，之後遇到了再來補充~~尤爲要關注antd icon打包