react ts wepack tsx分包，页面加载从40s优化到2秒 ，还有空间，但是不在讨论范围，本次说下wepack分包和react懒加载
yin'zi
真的有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
传送门
具体看下文档就好了，写的很清楚。
修改了两个文件，一个是刚刚修改的tsconfig.json，另一个是webpack配置文件。
看下webpack修改了些什么吧。
--OK--
再打包，看下目录加了文件没有
加了两个
值得注意的是，这里是在webpack output添加了如下代码，这个是ts-import-plugin文档没讲的，作者默认你是知道了这个的。
chunkFilename: '[name].lazy.js',
线上优化后的效果：
鼓掌👏👏👏
最后的代码可以看这里
相关链接
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--
网友评论