react ts wepack分包

╰+攻爆jí腚メ 2022-01-19 23:13 241阅读 0赞

> react ts wepack tsx分包，页面加载从40s优化到2秒 ，还有空间，但是不在讨论范围，本次说下wepack分包和react懒加载

## 引子 ##

真的有4M，40S 如图

于是加了GZIP，大概还有10s。（压缩级别是4，因为服务器原因，再压缩服务器受不鸟，毕竟学生机）

（读者：你说是。就是啊） (作者： 哼，看图(￢︿̫̿￢☆))

然后就是代码拆分，看下这个。

### 入口分包 ###

分包可以看下[webpack code-splitting][]

把css抽出来，添加了一个style.tsx

其他的依赖再别的地方，不好直接抽。

看下index.tsx 这个问题（页面入口）

--------------------

咦惹，这抽个鬼。

不要怕。毛委员说一切困难都是纸老虎。

--------------------

像这点击才出来的不是可以点击的时候再让它加载啊 对。机智，我真的是小机灵鬼。 如这个地方就是可以抽出来的打包的

### 后期加载的组件分包（路由，事件后的组件等） ###

这是react怎么分鸭。咦惹。 [戳这里进入官方代码分割区][Link 1] 看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)` 解决方案在这里[戳我进][Link 2]

也就是要外面包一个`<Suspense>`， 这是个好东西，具体看文档。 使用React.lazy的组件外面加一层Suspense。

## 好了让我们进入下一个环节，如何js分包，因为除了组件，还有JS呢。 ##

### js分包 ###

这个容易，就是import()， 里面返回`Promise`

不过，如果我页面要使用，怎么搞。 咦，直接写入试试。

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

那怎么搞，只能写变量一个。 ok，写好了，但是我不想一开始就加载好，那就，这样。点击的时候才执行。

看图

哦耶。

然后开始打包。

--------------------

没报错！

`虽然没报错，但是好像，输出的还是两个文件（刚刚第一个入口分包，import（）压根没打包出新的js文件）`

本篇的重点来了，`ts分包`

哦，这样啊。

找到tsconfig.json，修改

"module": "ESNext", 
    复制代码

搜了下有人写好了一个插件 `ts-import-plugin` [传送门][Link 3]

具体看下文档就好了，写的很清楚。

值得注意的是，如果这时候你的包引入报错了。这时候可以看下 "moduleResolution"的值，请改成node

"moduleResolution": "node"
    复制代码

修改了两个文件，一个是刚刚修改的tsconfig.json，另一个是webpack配置文件。 看下webpack修改了些什么吧。

\--OK-- 再打包，看下目录加了文件没有

加了两个

`值得注意的是，这里是在webpack output添加了如下代码`，这个是ts-import-plugin文档没讲的，作者默认你是知道了这个的。

chunkFilename: '[name].lazy.js',
    复制代码

线上优化后的效果：

鼓掌???

###### 最后的代码可以看[这里][Link 4] ######

#### 相关链接 ####

[react.docschina.org/docs/code-s…][Link 1] [github.com/Brooooookly…][Link 3] [webpack.docschina.org/guides/code…][webpack code-splitting] [stackoverflow.com/questions/5…][Link 2]

#### 好的github开源工具文章推荐 ####

[代码可视化工具][Link 5]

\--END--

[webpack code-splitting]: https://link.juejin.im?target=https%3A%2F%2Fwebpack.docschina.org%2Fguides%2Fcode-splitting%2F
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Freact.docschina.org%2Fdocs%2Fcode-splitting.html
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F54432861%2Fa-react-component-suspended-while-rendering-but-no-fallback-ui-was-specified
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FBrooooooklyn%2Fts-import-plugin
[Link 4]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2F0123cf%2Fauto-layout
[Link 5]: https://juejin.im/post/5cc3f9bf6fb9a031eb589f76