一、react項目打包

對于使用腳手架創建的項目，打包是一件非常容易的事情：

yarn build

其他文件沒有太多要解析的，我們看一下js文件：
[hash].chunk.js

• 代表是所有依賴的第三方庫， vendor(第三方庫) 的代碼；
  main.[hash].chunk.js
• 我們自己編寫的應用程序代碼；
  runtime~main.[hash].js
• Webpack runtime邏輯的chunk；
• 用于加載和運行你的應用程序；

思考：隨著業務邏輯代碼越多，main會變得非常臃腫；

二、React打包優化

很多模塊，其實沒有必要一開始就進行加載，會影響首屏加載速度；
我們可以讓某些組件用到時再加載（懶加載）；
使用懶加載之后的打包結果：

如何可以讓一個組件進行懶加載呢？

• 使用react給我們提供的lazy函數即可；
  
  但是，修改后運行代碼會報錯：
  

• React希望我們提供一個在組件沒有加載出來之前，顯示的組件；

• 我們可以通過Suspense組件傳入一個fallback屬性；
  

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的react项目打包的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。