Improve Bundle Chunking

[kyeotic]

When bundled with create-react-app default settings this library produces over 400 chunked bundles. They are invidually all small, but total almost 1mb. I don't know what they all are, and they don't all appear to be loaded, but it is quite strange.

It looks like they are mostly from prism. I'm guessing they are individual language highlighting packs. Perhaps there is a way to skip them?

---

This tool is beautiful by the way, thank you for making it. This is easily the nicest markdown editor I've come across

[kyeotic]

I might be reading this incorrectly, but it looks like you hardcode the loading of all languages from prism. It would be nice to be able to pair this down, perhaps by using the prism webpack plugin in the client app and defining the languages as props.

[jaywcjlove]

@kyeotic These small JS files are loaded when used, and do not affect the size of the packaged JS.

My application scenario cannot determine which languages ​​to load.

[kyeotic]

@jaywcjlove Yes, but the bundles are still present in the deployment, and they still add considerable noise to the build and source-map-explorer report. It would be nice if we could whitelist languages so that applications that did know which languages it supported could keep the rest from being bundled. This would be valuable even if the default was to bundle them all.

[jaywcjlove]

@kyeotic This requires writing a webpack plugin. This needs to be studied.

[jaywcjlove]

@kyeotic We need a plugin like monaco-editor-webpack-plugin

[kyeotic]

I'm actually having a lot of trouble getting the prism webpack plugin to do anything. I tried forking this repo and trimming down the languages, then built with the prism plugin on the lib. I even added the plugin to the app that installed the editor, so that it was running in both places. I get 370+ bundles, which is smaller but not by half as many languages as I removed.

[jaywcjlove]

@kyeotic thx! this good idea. I will deal with it when I have time. @uiwjs/react-markdown-preview

[jaywcjlove]

Add Webpack configuration

https://github.com/uiwjs/react-baidu-map/blob/bff63bb0d175487203e2375380f3a76e860d0552/.kktrc.ts#L112-L117

[ppascualv]

is there any possible solution without ejecting create-react-app?

[jaywcjlove]

@ppascualv https://github.com/kktjs/kkt Override create-react-app webpack configs without ejecting

[ppascualv]

Is there any solution for this issue or any workaround without ejecting the app? I was taking a look at your library but I'm not sure how can it solve the issue.

[jaywcjlove]

@ppascualv Add webpack config.

https://github.com/uiwjs/react-baidu-map/blob/74459dea893bc696819ae94bd900e01398ee9d1d/.kktrc.ts#L53-L166

[jaywcjlove]

@ppascualv Dynamic import is used. Unable to split chunks it.

https://v4.webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-1

This configuration can enlarge your initial bundles, it is recommended to use dynamic imports when a module is not immediately needed.

[guoseven]

it's not work

webpack.config.js

 optimization: {

      // Automatically split vendor and commons
      // https://twitter.com/wSokra/status/969633336732905474
      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
      splitChunks: {
        // chunks: 'all',
        // name: false,
        cacheGroups: {
          markdown_editor: {
            test: /[\\/]node_modules[\\/]@uiw[\\/]/,
            name: 'vendors-markdown',
            chunks: 'all',
          }
        }
      },
}

[jaywcjlove]

@guoseven

react-md-editor/.kktrc.ts

Lines 41 to 45 in 34f61a3

	prismjs: {
	test: /[\\/]node_modules[\\/](prismjs)[\\/]/,
	name: 'prismjs-vendor',
	chunks: 'async',
	},

[guoseven]

how to use it

[jaywcjlove]

@guoseven Modify webpack configuration. https://webpack.js.org/configuration/optimization/#optimizationsplitchunks

[jaywcjlove]

• How to disable code highlighting feature #586 (comment)