react首屏頁面加載性能優化記錄

能按需加載的東西、盡量配置一下。

一、webpack devtool

devtool的值有好幾個，根據自己的情況和環境的不同，選擇合適的，一般打包的時候可以用：eval 、eval-source-map或者cheap-eval-source-map。我這邊打包時，直接設置成了：‘eval ’。具體可以去官網查看每個值的作用~

 

 

二、如果使用的是antd框架，通過打包分析，你會發現有個icons文件500多k，有點大~ 

解決辦法是：

1.隨意找個地方建個.js文件，名稱也隨意~，比如是icons.js (當然要規范哈)，用來按需引入在項目中使用到的圖標，如下：

// 根據自己在項目中使用到的圖標 按需引入
export { default as UserOutline} from '@ant-design/icons/lib/outline/UserOutline'
export { default as LockOutline} from '@ant-design/icons/lib/outline/LockOutline'
export { default as GitlabOutline} from '@ant-design/icons/lib/outline/GitlabOutline'
export { default as ProjectOutline} from '@ant-design/icons/lib/outline/ProjectOutline'
export { default as BulbOutline} from '@ant-design/icons/lib/outline/BulbOutline'
export { default as DesktopOutline} from '@ant-design/icons/lib/outline/DesktopOutline'

 

2.在webpack配置文件中的alias對象，添加一些代碼，代碼如下：

alias:{
   '@ant-design/icons/lib/dist$': path.resolve(__dirname, '填第一步文件的路徑')
   // '@ant-design/icons/lib/dist$': path.resolve(__dirname, '../src/util/icons.js')
}

注：目前使用的antd版本是^3.26.15 。如果項目中，用的圖標太多，那就有點麻煩了，可以直接考慮用阿里巴巴矢量圖吧~

 

三、開啟gzip壓縮功能

1.安裝 compression-webpack-plugin ，執行 npm i compression-webpack-plugin -D

2.引入compression-webpack-plugin

const CompressionWebpackPlugin = require("compression-webpack-plugin");

  const productionGzipExtensions = ["js", "css", "json"];

3.在plugins中配置

new CompressionWebpackPlugin({ //gzip配置
                algorithm: 'gzip',
                test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
                minRatio: 0.6,
                threshold:10240, //超過10k
            })

compression-webpack-plugin還有其它配置項，具體可以去webpack官網，直接搜索compression-webpack-plugin就行。

配置完之后，直接運行打包命令，npm run build ，然后在打包文件夾中，會多出一些.gz文件。之后、全部放到服務器上去。(在vue中也同樣可以使用)

 

需要確保服務器那邊，開啟了gzip功能。

其實前端這些配置，按理說是可以省略的，因為服務器那邊直接開啟gzip功能，也能有壓縮效果。

那為啥還要前端這邊去配置生成.gz文件呢？如果前端這邊提供了.gz文件，服務器收到請求時，就直接用這個文件了，但如果前端沒有提供.gz文件，服務器會自動去壓縮生成，這一步壓縮生成，是需要時間滴。