Client bundle size for client-side application

[danonechik94]

I use @diplodoc/transform and @gravity-ui/markdown-editor in my client project to display and edit user messages. While working on it I noticed while throttling the internet connection, that the page bundle that contains both of these components takes up 2.4mb gzipped and it takes a long time to load on a throttled connection.

After reviewing the bundle with bundle analyzer, I noticed that lowlight and higlight.js takes up a lot of space in the bundle. Due to the fact that these are optional deps, I removed them, but still, the bundle takes up 1.4mb, although I don't use custom plugins in @diplodoc/transform and use the minimal commonmark preset in @gravity-ui/markdown-editor. In the bundle I see a lot of packages that are not being used (like plugins and table module).

I prepared a sample project here. You can use it to see the lazy-loaded bundle on the /editor page, that takes up 2.4mb.

I believe that both of these libraries can be optimized a bit, so that the size is adequate for a client application. Although most of the bundle is taken up by @diplodoc/transform, some optimizations can be done to the @gravity-ui/markdown-editor as well. Anyway, if someone uses the @gravity-ui/markdown-editor package, the probability of using the @diplodoc/transform in the same project is high.

I created a similar issue in the @diplodoc/transform repo - diplodoc-platform/transform#446

[makhnatkin]

1. We need to think about what we can dynamically load, for example, only ProseMirror first or CodeMirror.
2. Perhaps we can load some plugins that affect the visual after the main block has loaded (image resizing, highlight.js, etc...).
3. We need to analyze which takes up more space (e.g., using bundle analyzer).