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