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 這個問題（頁面入口）
咦惹灭忠，這抽個鬼。
不要怕座硕。毛委員說一切困難都是紙老虎弛作。
像這點擊才出來的不是可以點擊的時候再讓它加載啊
對。機(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腮敌，寫好了阱当，但是我不想一開始就加載好，那就糜工，這樣弊添。點擊的時候才執(zhí)行。
看圖
哦耶捌木。
然后開始打包油坝。
沒報錯！
雖然沒報錯刨裆，但是好像澈圈，輸出的還是兩個文件（剛剛第一個入口分包，import（）壓根沒打包出新的js文件）
本篇的重點來了帆啃，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--
