Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[6.x] Code-split tiptap, codemirror, prosemirror #11469

Merged
merged 3 commits into from
Feb 28, 2025
Merged

Conversation

jasonvarga
Copy link
Member

@jasonvarga jasonvarga commented Feb 18, 2025

This introduces code splitting in a number of places.

Before this, the js file was 3,555.16 kB │ gzip: 995.28 kB.

I noticed tiptap, codemirror, prosemirror, etc are quite large and take up a big chunk of the JS. These are only ever used by specific fieldtypes like Bard, Code, Yaml, and Markdown.

This PR makes those fieldtypes into async components. Their JS will now only get loaded when they are used.

The Bard JS API needed to change too in order to support dynamic imports. The tiptap property has been removed and you will now get it passed into callbacks.

-const { Node, Mark, Extension } = Statamic.$bard.tiptap.core; 
 
-Statamic.$bard.addExtension(() => {
+Statamic.$bard.addExtension(({ tiptap }) => {
+   const { Node, Mark, Extension } = tiptap.core;
    return [
        Node.create({...}),
        Mark.create({...}),
        Extension.create({...}),
    ]
});

After these changes, the js file is 2,266.68 kB │ gzip: 607.05 kB.

@jasonvarga jasonvarga marked this pull request as ready for review February 28, 2025 21:35
@jasonvarga jasonvarga merged commit acae756 into master Feb 28, 2025
18 checks passed
@jasonvarga jasonvarga deleted the code-split branch February 28, 2025 21:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant