react ts wepack tsx分包，頁面加載從40s優(yōu)化到2秒 ，還有空間，但是不在討論范圍，本次說下wepack分包和react懶加載

yin'zi

真的有4M，40S
如圖

于是加了GZIP，大概還有10s。（壓縮級別是4，因為服務(wù)器原因，再壓縮服務(wù)器受不鳥，畢竟學(xué)生機(jī)）

（讀者：你說是。就是啊）
(作者： 哼，看圖(￢︿??￢☆))

然后就是代碼拆分，看下這個。

入口分包

分包可以看下webpack code-splitting

把css抽出來，添加了一個style.tsx

其他的依賴再別的地方，不好直接抽。

看下index.tsx 這個問題（頁面入口）

咦惹，這抽個鬼。

不要怕。毛委員說一切困難都是紙老虎。

像這點(diǎn)擊才出來的不是可以點(diǎn)擊的時候再讓它加載啊
對。機(jī)智，我真的是小機(jī)靈鬼。
如這個地方就是可以抽出來的打包的

后期加載的組件分包（路由，事件后的組件等）

這是react怎么分鴨。咦惹。
戳這里進(jìn)入官方代碼分割區(qū)
看react官網(wǎng)怎么講
哦，import()啊（這個玩意是好東西，但是沒法直接用在react組件上）。
組件的話需要React.lazy

修改還是很簡單的，把組件換下就可以，下面的可以不用改。

import 改成 lazy(() => import(npm包))

如圖

這樣就可以咯。

不過打包后發(fā)現(xiàn)。怎么報錯了
[A React component suspended while rendering, but no fallback UI was specified](https://stackoverflow.com/questions/54432861/a-react-component-suspended-while-rendering-but-no-fallback-ui-was-specified)
解決方案在這里戳我進(jìn)

也就是要外面包一個<Suspense>， 這是個好東西，具體看文檔。
使用React.lazy的組件外面加一層Suspense。

好了讓我們進(jìn)入下一個環(huán)節(jié)，如何js分包，因為除了組件，還有JS呢。

js分包

這個容易，就是import()， 里面返回Promise

不過，如果我頁面要使用，怎么搞。 咦，直接寫入試試。

QAQ。貌似不行哦，Ract提示里面需要是string而不是Promise

那怎么搞，只能寫變量一個。 ok，寫好了，但是我不想一開始就加載好，那就，這樣。點(diǎn)擊的時候才執(zhí)行。

看圖

哦耶。

然后開始打包。

沒報錯！

雖然沒報錯，但是好像，輸出的還是兩個文件（剛剛第一個入口分包，import（）壓根沒打包出新的js文件）

本篇的重點(diǎn)來了，ts分包

哦，這樣啊。

找到tsconfig.json，修改

"module": "ESNext", 

搜了下有人寫好了一個插件 ts-import-plugin
傳送門

具體看下文檔就好了，寫的很清楚。

修改了兩個文件，一個是剛剛修改的tsconfig.json，另一個是webpack配置文件。
看下webpack修改了些什么吧。

--OK--
再打包，看下目錄加了文件沒有

加了兩個

值得注意的是，這里是在webpack output添加了如下代碼，這個是ts-import-plugin文檔沒講的，作者默認(rèn)你是知道了這個的。

chunkFilename: '[name].lazy.js',

線上優(yōu)化后的效果：

鼓掌??????

最后的代碼可以看這里

相關(guān)鏈接

https://react.docschina.org/docs/code-splitting.html
https://github.com/Brooooooklyn/ts-import-plugin
https://webpack.docschina.org/guides/code-splitting/
https://stackoverflow.com/questions/54432861/a-react-component-suspended-while-rendering-but-no-fallback-ui-was-specified

好的github開源工具文章推薦

代碼可視化工具

--END--