Improve Slate's `readOnly` bundle size [ Discussion ]

The easiest, and I would imagine the most common way to interpret the data that Slate Editor has produced is to set readOnly prop in Slate to true. Doing that means there’s no need to force HTML down React’s throat and we’re using a well-tested data structure that’s easy to store, especially in databases like MongoDB.

The problem with this approach, however is the download size for the user. In my case it’s almost 80KB (GZipped, almost 300KB actual) of data that she has to receive, decompress, parse and execute. Much of which might not be necessary at all.

Here are the things that I feel might not be necessary if the <Editor /> is in read-only mode:

• history.js, change.js and changes - since no changes are being made to the document, there’s no history to store and process
• text.js - if I understand this correctly it’s a utility module that lets you export plain text compiled from the Editor’s data; which isn’t necessary to display content
• immutable.js - don’t know if this could be trimmed as this tool seems to be deep within the core of Slate, but perhaps if we don’t use history and changes?
• react-portal - maybe?

I’d imagine there are a few ways of doing this:

• use conditional imports within Slate for a few large packages (although I’d imagine this could introduce a whole bunch of browser requests and get ugly, eventually): historyIsNeeded && import("history.js").then(history => { /* ... */ })
• break Slate into more packages (sounds painful)
• create a fork with an absolute minimum code required to render, like slate-lite and maintain it separately or as a module within this repo with Learna
• change how the package is being minified and tree-shaken (perhaps there are some signals we can create to let WebPack know that under read-only we won’t need all the code (guessing that #1568 is related here)

Would love to know if anyone here has any thoughts or ideas about this. Thank you!

[dacioromero]

I think it would be incredibly useful if Slate provided a “Reader” component themselves that renders the same as an Editor without the overhead of the editing functions.

[ianstormtaylor]

@dmitrizzle nice, that’s the best way to do it! I’m going to close this out.