react ts wepack分包

react ts wepack tsx分包，頁面加載從40s優化到2秒 ，還有空間，可是不在討論範圍，本次說下wepack分包和react懶加載

引子

真的有4M，40S 如圖

因而加了GZIP，大概還有10s。（壓縮級別是4，由於服務器緣由，再壓縮服務器受不鳥，畢竟學生機）

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

而後就是代碼拆分，看下這個。

入口分包

分包能夠看下webpack code-splitting

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

其餘的依賴再別的地方，很差直接抽。

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

---

咦惹，這抽個鬼。

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

---

像這點擊纔出來的不是能夠點擊的時候再讓它加載啊 對。機智，我真的是小機靈鬼。 如這個地方就是能夠抽出來的打包的

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

這是react怎麼分鴨。咦惹。 戳這裏進入官方代碼分割區 看react官網怎麼講 哦，import()啊（這個玩意是好東西，可是無法直接用在react組件上）。 組件的話須要React.lazy

修改仍是很簡單的，把組件換下就能夠，下面的能夠不用改。

import 改爲 lazy(() => import(npm包))
複製代碼

如圖

這樣就能夠咯。

不過打包後發現。怎麼報錯了 [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) 解決方案在這裏戳我進

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

好了讓咱們進入下一個環節，如何js分包，由於除了組件，還有JS呢。

js分包

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

不過，若是我頁面要使用，怎麼搞。 咦，直接寫入試試。

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

那怎麼搞，只能寫變量一個。 ok，寫好了，可是我不想一開始就加載好，那就，這樣。點擊的時候才執行。

看圖

哦耶。

而後開始打包。

---

沒報錯！

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

本篇的重點來了，ts分包

哦，這樣啊。

找到tsconfig.json，修改

"module": "ESNext", 
複製代碼

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

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

值得注意的是，若是這時候你的包引入報錯了。這時候能夠看下 "moduleResolution"的值，請改爲node

"moduleResolution": "node"
複製代碼

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

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

加了兩個

值得注意的是，這裏是在webpack output添加了以下代碼，這個是ts-import-plugin文檔沒講的，做者默認你是知道了這個的。

chunkFilename: '[name].lazy.js',
複製代碼

線上優化後的效果：

鼓掌👏👏👏

最後的代碼能夠看這裏

相關連接

react.docschina.org/docs/code-s… github.com/Brooooookly… webpack.docschina.org/guides/code… stackoverflow.com/questions/5…

好的github開源工具文章推薦

代碼可視化工具

--END--