打包之后，项目代码分析发现，babel占用也太大了，有办法处理一下吗 about react-code-preview

[huijiewei]

推荐去掉 babel, 使用 sucrase

[jaywcjlove]

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

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

react-code-preview/src/transform.tsx

Lines 1 to 13 in c8baefc

	import { transform } from '@babel/standalone';
	import RemoveImports from 'babel-plugin-transform-remove-imports';
	import TransformClass from '@babel/plugin-transform-classes';
	export async function BabelTransform(input: string) {
	const specifiers: any[] = [];
	const code = transform(input, {
	presets: ['es2015', 'react'],
	plugins: [
	[RemoveImports, { removeAll: true }],
	[TransformClass, { loose: true }],
	],
	}).code;

[dapandocs]

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

[jaywcjlove]

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

react-code-preview/.kktrc.ts

Lines 26 to 64 in c8baefc

	splitChunks: {
	chunks: 'all', // async对异步引入的代码分割 initial 对同步引入代码分割 all对同步异步引入的分割都开启
	minSize: 30000, // 字节 引入的文件大于30kb才进行分割
	maxSize: 0, // 文件的最大尺寸，优先级：maxInitialRequest/maxAsyncRequests < maxSize < minSize，需要注意的是这个如果配置了，umi.js 就可能被拆开，最后构建出来的 chunkMap 中可能就找不到 umi.js 了
	minChunks: 1, // 模块至少使用次数
	maxAsyncRequests: 30, // 同时加载的模块数量最多是_个，只分割出同时引入的前_个文件（按需加载模块）
	maxInitialRequests: 25, // 首页加载的时候引入的文件最多 _ 个（加载初始页面）
	automaticNameDelimiter: '~', // 缓存组和生成文件名称之间的连接符
	name: true, // 缓存组里面的 filename 生效，覆盖默认命名
	cacheGroups: {
	markdown_preview: {
	name: 'vendors-markdown-preview',
	chunks: 'all',
	test: /[\\/]node_modules[\\/](@uiw\/react-markdown-preview|codemirror)[\\/]/,
	priority: -2,
	},
	uiwjs: {
	name: 'vendors-uiwjs',
	chunks: 'all',
	test: /[\\/]node_modules[\\/]@uiw\/(copy-to-clipboard|formatter|icons|react-affix|react-alert|react-avatar|react-back-top|react-badge|react-breadcrumb|react-button|react-button-group|react-calendar|react-card|react-checkbox|react-codemirror|react-collapse|react-copy-to-clipboard|react-date-input|react-date-picker|react-descriptions|react-divider|react-drawer|react-dropdown|react-file-input|react-form|react-github-corners|react-grid|react-icon|react-input|react-layout|react-list|react-loader|react-menu|react-message|react-modal|react-month-picker|react-notify|react-overlay|react-overlay-trigger|react-pagination|react-pin-code|react-popover|react-portal|react-progress|react-radio|react-rate|react-search-select|react-select|react-slider|react-split|react-steps|react-switch|react-table|react-tabs|react-tag|react-textarea|react-time-picker|react-tooltip|react-tree|react-tree-checked|reset.css|utils)[\\/]/,
	priority: -4, // 优先级，先打包到哪个组里面，值越大，优先级越高
	},
	react: {
	name: 'vendors-react',
	chunks: 'all',
	test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
	priority: -5,
	},
	babel_standalone: {
	name: 'vendors-standalone',
	chunks: 'all',
	test: /[\\/]node_modules[\\/](@babel\/standalone)[\\/]/,
	priority: -5,
	},
	babel_runtime: {
	name: 'vendors-runtime',
	chunks: 'all',
	test: /[\\/]node_modules[\\/](@babel\/runtime|@babel\/plugin-transform-classes|babel-plugin-transform-remove-imports)[\\/]/,
	priority: -5,

[jaywcjlove]

@huijiewei 我在 kktjs/markdown-react-code-preview-loader#1 (comment) 项目中试了一下很多问题。