react-code-preview icon indicating copy to clipboard operation
react-code-preview copied to clipboard

打包之后,项目代码分析发现,babel占用也太大了,有办法处理一下吗

Open dapandocs opened this issue 4 years ago • 5 comments
trafficstars

image image 使用react-code-preview之后,就会出现这种情况....望看到后,抽时间回复一下,感激!!

dapandocs avatar Jan 30 '21 10:01 dapandocs

@react-spy 这是因为使用在线编译 ES 代码的 babel 工具 @babel/standalone,本身体积非常大,无法解决这个问题。

可以将它分拆成几个 js 加载,这样加载就变得会快一些。

https://github.com/uiwjs/react-code-preview/blob/c8baefc8da7737403f244d27c90e5ed95d3a8d65/src/transform.tsx#L1-L13

jaywcjlove avatar Jan 30 '21 11:01 jaywcjlove

如何将@babel 拆分啊?我只会页面js的拆分,有例子提供一下吗?感谢

dapandocs avatar Jan 30 '21 11:01 dapandocs

@react-spy 修改 webpack 配置类似于下面这种方法。

https://github.com/uiwjs/react-code-preview/blob/c8baefc8da7737403f244d27c90e5ed95d3a8d65/.kktrc.ts#L26-L64

jaywcjlove avatar Jan 30 '21 16:01 jaywcjlove

推荐去掉 babel, 使用 sucrase

huijiewei avatar Jun 30 '22 00:06 huijiewei

@huijiewei 我在 https://github.com/kktjs/markdown-react-code-preview-loader/issues/1#issue-1289486936 项目中试了一下很多问题。

jaywcjlove avatar Jun 30 '22 15:06 jaywcjlove