默認(rèn)情況下，當(dāng)在項(xiàng)目根路徑下執(zhí)行npm run build時(shí)，create-react- app內(nèi)部使用webpack將src/路徑下的所有代碼打包成一個JS文件和一個 CSS文件。

當(dāng)項(xiàng)目代碼量不多時(shí)，把所有代碼打包到一個文件的做法并不會有什么影響。但是，對于一個大型應(yīng)用，如果還把所有的代碼都打包到一個文件中，顯然就不合適了。試想，當(dāng)用戶訪問登錄頁面時(shí)，瀏覽器加載的JS文件還包含其他頁面的代碼，這會延長網(wǎng)頁的加載時(shí)間，給用戶帶來不好的體驗(yàn)。理想情況下，當(dāng)用戶訪問一個頁面時(shí)，該頁面應(yīng)該只加載自己使用到的代碼。解決這個問題的方案就是代碼分片，將JS代碼分片打包到多個文件中，然后在訪問頁面時(shí)按需加載。

create-react-app支持通過動態(tài)import()的方式實(shí)現(xiàn)代碼分片。

import() 接收一個模塊的路徑作為參數(shù)，然后返回一個Promise對象，Promise對象的值就是待導(dǎo)入的模塊對象。

首頁 我們建立個importComponent 組件。

然后到 router 路由文件里面引用

這樣引入之后 打包后的js就會多出幾個 ，這樣就可以對react性能優(yōu)化，實(shí)現(xiàn)組件的按需加載。

總結(jié)

以上是生活随笔為你收集整理的react 动态路 嵌套动子路由_react 路由动态加载组件，实现按需加载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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