react ts wepack分包

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
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–