Is it expected that a very simple Plate editor would add 332.65 kB to compressed, and tree shaken, bundle size?

[zackriegman]

I'm only using basic marks (bold, italic, underline), links, mentions and the balloon toolbar.

When I explored the source maps I was surprised to see docx-cleaner, plate-ui-dnd, plate-ui-media, plate-table, plate-indentlist, plate-code-block, plate-list, etc., etc. Plus prism.js, micromark, js-video-url-parser which I'm guessing, but don't know for sure, are pulled in by Plate.

What am I doing wrong?

import {
  createParagraphPlugin,
  createBoldPlugin,
  createItalicPlugin,
  createUnderlinePlugin,
  createLinkPlugin,
  createMentionPlugin,

  LinkElement,
  StyledLeaf,
  StyledElement,

  withProps,

  MentionCombobox,
  MentionElement,
  PlateFloatingLink,
  BalloonToolbar,
  getPluginType,
  MARK_BOLD,
  MARK_ITALIC,
  MARK_UNDERLINE,
  ELEMENT_LINK,
  LinkToolbarButton,
  MarkToolbarButton,
  usePlateEditorRef,
  createPlugins,
  PlateProvider,
  Plate,
} from "@udecode/plate";

import { Transforms, Editor, Point } from "slate";

[zbeyens]

Plate should be fully tree-shakeable. Anything proven to not be so will be extracted into another package.

For example, micromark seems to be tree-shakeable. How could we prove it's not? Note that tree-shaking depends on your build setup.

[zackriegman]

@zbeyens That's encouraging. I must be doing something very wrong then. How do I get tree shaking working for Plate with the default create-react-app scripts? Below is what I'm doing right now, and, as you can see adding the most minimal Plate editor is adding 477.75 kB to the compressed size of an empty app.

Relevant version info from package.json

"dependencies": {
    ...
    "@udecode/plate": "^18.11.2",
    ...
    "react-scripts": "5.0.1",
    "slate": "^0.86.0",
    "slate-history": "^0.86.0",
    "slate-hyperscript": "^0.77.0",
    "slate-react": "^0.86.0",
    ...
  },

What I'm running:

> npx create-react-app my-app
> cd my-app/
> npm run build

...

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  46.6 kB  build/static/js/main.0215976b.js
  1.78 kB  build/static/js/787.28cb0dcd.chunk.js
  541 B    build/static/css/main.073c9b0a.css

...

> npm install @udecode/plate

<<< then I copy paste default editor into App.js >>>

> npm run build

...

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  524.35 kB (+477.75 kB)  build/static/js/main.cf81ffcd.js
  1.78 kB                 build/static/js/787.28cb0dcd.chunk.js
  264 B (-277 B)          build/static/css/main.e6c13ad2.css

The bundle size is significantly larger than recommended.
Consider reducing it with code splitting: https://goo.gl/9VhYWB
You can also analyze the project dependencies: https://goo.gl/LeUzfb

...

[zackriegman]

@zbeyens Any hints here? I'm a bit new to this, but I've looked around a fair amount and it seems like tree shaking is enabled by default in the create-react-app setup and scripts, but doesn't seem to work at all with Plate... I'm not sure where to start.

[zbeyens]

Probably an ESM thing. For example in CRA you should import from 'lodash/castArray' instead of from 'lodash'. However plate build supports the latter with tree-shaking.

I don't know much about it. Needs research.

[zbeyens]

https://platejs.org/ now encourages installing only the packages you need.