How to reduce react-md-editor size while building?

[rts-gordon]

Hi there,

I use react-md-editor in my React app, I found that the app has double size after npm run build. Is there any way to reduce the md-editor size while building? Thank you.

Before use react-md-editor: app size: 4.9M, main.xxx.js.map size: 3.8M;
After use react-md-editor: app size: 9.6M, main.xxx.js.map size: 7.3M;

[jaywcjlove]

react-md-editor/www/.kktrc.ts

Lines 20 to 74 in 5db9de2

	splitChunks: {
	cacheGroups: {
	reactvendor: {
	test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
	name: 'react-vendor',
	chunks: 'all',
	},
	katex: {
	test: /[\\/]node_modules[\\/](katex)[\\/]/,
	name: 'katex-vendor',
	chunks: 'all',
	},
	mermaid: {
	test: /[\\/]node_modules[\\/](mermaid)[\\/]/,
	name: 'mermaid-vendor',
	chunks: 'all',
	},
	dagred3: {
	test: /[\\/]node_modules[\\/](dagre-d3)[\\/]/,
	name: 'dagre-d3-vendor',
	chunks: 'all',
	},
	momentlodash: {
	test: /[\\/]node_modules[\\/](moment-mini|lodash|d3-array|d3-geo|d3-shape|dagre)[\\/]/,
	name: 'momentlodash-vendor',
	chunks: 'all',
	},
	d3: {
	test: /[\\/]node_modules[\\/](d3-\w+(-?\w+))[\\/]/,
	name: 'd3-vendor',
	chunks: 'all',
	},
	micromark: {
	test: /[\\/]node_modules[\\/](micromark)[\\/]/,
	name: 'micromark-vendor',
	chunks: 'all',
	},
	prismjs: {
	test: /[\\/]node_modules[\\/](refractor)[\\/]/,
	name: 'refractor-prismjs-vendor',
	chunks: 'all',
	},
	runtime: {
	test: /[\\/]node_modules[\\/](@babel[\\/]runtime)[\\/]/,
	name: 'babel-runtime-vendor',
	chunks: 'all',
	},
	parse5: {
	test: /[\\/]node_modules[\\/](parse5)[\\/]/,
	name: 'parse5-vendor',
	chunks: 'all',
	},
	},
	},
	};

@rts-gordon You need to do code splitting. Because it supports automatic highlighting of code in multiple programming languages.

react-md-editor/www/package.json

Line 22 in 5db9de2

"source-map-explorer": "~2.5.3"

You can use source-map-explorer to view your package dependencies

Like thie: https://uiwjs.github.io/react-md-editor/website-result.html

[rts-gordon]

Thanks for your answer.

I want to know: why react-md-editor has so huge size after build?

[jaywcjlove]

@rts-gordon Because all syntax highlighting is automatically lazy loaded. So all the syntax highlighting code is packed into it.

[omid]

@jaywcjlove How to disable it completely if we don't want to use syntax highlighting feature at all?
(I'm using Vite)

[omid]

@rts-gordon check out this issue:
#586 (comment)

[rts-gordon]

@omid Thank you.

I will learn from that issue.