Optimizing Preline JS for Production (Svelte/Sveltekit)

[kjellherzke]

Hi,
I recently have issues, optimizing my sveltekit app, since I began using preline js. Furthermore, the documentation isn't helping either, as it mostly is insufficient, for frameworks such as svelte (e.g. it states you have to install preline as npm package, and then again copy its compiled js in static folder, which seems really unoptimized and redundant). As another user mentioned in #490, the size of the bundled "preline.js" file is around 250kb large, and while it is difficult lazy loading the file itself, this results in a really bad, unoptimized website.

Does anyone have any suggestions, tips or solutions to this or a similar issue?
I'm looking forward to hearing from anyone of you.

Thanks

[P00HB33R]

Yeah, I completely agree with your sentiment that the docs are really not up to scratch. I usually go to Tailwind UI docs, as preline is basically just a re-styled (and cheaper...) version of Tailwind UI.

I also agree that work needs to be done to get the preline.js files' size down to something a bit more sane. And yes, having to manually copy the preline file is really annoying...

[jahaganiev]

Thank you for your feedback! I’d like to address a few points to clear up some misunderstandings:

Preline is not tied to any specific framework:
Preline is an HTML/JavaScript-first Tailwind component library. It’s not a framework-specific library like Svelte or React component libraries by default.

For framework integration, our quick start guides are designed as introductory resources to help users get up and running quickly. However, deeper optimization typically relies on the specific tools and configurations provided by each framework (e.g., Svelte, React, etc.). Developers are encouraged to apply the best practices for bundling, optimization, and performance specific to their chosen framework.

Preline's modularity and documentation:
Preline includes standalone NPM packages for each plugin, complete with detailed documentation available here. These packages also include TypeScript files and full Webpack source files, giving you the flexibility to customize or optimize further for your project’s needs.

Addressing file size concerns:
The preline.js file contains all plugins and features, which is why the size is 250KB. If size is a concern, I recommend using the individual plugin packages to include only what your project requires, reducing the overall bundle size.

We appreciate and welcome any constructive feedback and will continue to refine the documentation and examples to make Preline even more approachable. Please feel free to open an Issue if you have specific suggestions with more details.

Cheers!
Jaha