Optimizing bundle size when using setups

[thdoan]

I am using this setup:

const codeEditor = basicEditor( '#code-editor', { language: 'javascript', theme: 'vs-code-dark', }, () => console.log('ready!') ); 

My rollup config:

{ input: 'js/test.js', output: { dir: BUILD_DIR + '/js', format: 'es', }, terser({ ecma: 2017, module: true, }), plugins: [ terser({ ecma: 2017, module: true, }), ], }, 

However, the bundle is quite big compared to CodeJar (61kb vs 20kb):

One thing I noticed right away is that it's bundling all the themes even though I'm only using one theme. Is there something I can do in my JS setup or rollup config to decrease the bundle size?

UPDATE: After commenting out all the themes I don't need, the bundle size is what I expect now :-)

themes/index.js

const themes = /* @__PURE__ */ Object.assign({ //"./atom-one-dark.css": () => import("../atom-one-dark.js"), //"./dracula.css": () => import("../dracula.js"), //"./github-dark-dimmed.css": () => import("../github-dark-dimmed.js"), //"./github-dark.css": () => import("../github-dark.js"), //"./github-light.css": () => import("../github-light.js"), //"./night-owl.css": () => import("../night-owl.js"), //"./prism-okaidia.css": () => import("../prism-okaidia.js"), //"./prism-solarized-light.css": () => import("../prism-solarized-light.js"), //"./prism-tomorrow.css": () => import("../prism-tomorrow.js"), //"./prism-twilight.css": () => import("../prism-twilight.js"), //"./prism.css": () => import("../prism-6F6wFRi-.js"), "./vs-code-dark.css": () => import("../vs-code-dark-Ck-wRyqI.js"), //"./vs-code-light.css": () => import("../vs-code-light.js"), }); const loadTheme = async (name) => (await themes[`./${name}.css`]?.())?.default; export { loadTheme }; //# sourceMappingURL=index.js.map 

[jonpyt]

Nice to see that you found a solution. All the themes being included in the bundle as separate files is intended. Only the themes you need will get dynamically imported when you create an editor. So while the total bundle might've been 60kB, less than 30kB of it would've been loaded in the browser, making it a non-issue.

Your solution did make the main JS chunk slightly smaller though since it removed most entries in the import map for the themes.

If you wan't full control over your bundle, look at advanced usage. The example given there creates an editor equivalent to the full setup, but also with copyButton().

Also, since the package contains a lot of ES2020 syntax, you can decrease your bundle slightly by changing ecma to 2020 instead. The package relies on some ES2018 features that can't be transpiled, so setting it lower than 2018 makes little sense.

[jonpyt]

I'm assuming you haven't gotten the type declarations to work then, or have you? If not then the developer experience won't be ideal.

[thdoan]

I got everything working perfectly the way I wanted :-). I don't think type declarations were an issue because I'm not using TS. FYI I'm using this, which is all compiled to JS: https://unpkg.com/browse/prism-code-editor@3.3.1/dist/ (used https://github.com/TMaize/go-unpkg-downloader to download)

[jonpyt]

Type declarations would give you better autocompletion and documentation in the editor even if you're not using TS. Not sure if go-unpkg-downloader downloads the .d.ts files too or just the .js files.

[thdoan]

It downloads everything, but I don't recall seeing autocompletions in VS Code. Maybe I don't have the correct configuration, but I managed to make everything work so it's all good in the end.

[jonpyt]

Yeah, it doesn't matter much. You can always read the API documentation online, or view your downloaded .d.ts files.