一、react項目打包

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

yarn build

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

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

思考：隨著業(yè)務(wù)邏輯代碼越多，main會變得非常臃腫；

二、React打包優(yōu)化

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

如何可以讓一個組件進(jìn)行懶加載呢？

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

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

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。