search

dylanblokhuis / svelte-feather-icons

https://www.npmjs.com/package/svelte-feather-icons/
MIT License
135 stars 21 forks source link

Slow build time #10

Open antony opened 3 years ago

antony commented 3 years ago

So, after using these icons for a long time and not realising why my Sapper build was slow (about 2 minutes) I decided to do some logging.

Turns out that every time a dependency includes this library, svelte compiles every single icon (tree-shaking happens after compilation it seems), and it adds 6 seconds (on a brand new Ryzen 7 - longer on a slower machine)! to the compile time of your app!

Happy to discuss ideas for improving this.

dylanblokhuis commented 3 years ago

To reduce the build time you can import the svelte component directly:

import HomeIcon from "svelte-feather-icons/src/icons/HomeIcon.svelte";

If there are ways to reduce the treeshaking cost, I would love to hear it.

antony commented 3 years ago

I've actually resorted to remaking the library (forking yours and making it a private/internal module):

https://gist.github.com/antony/3c5129fae41e4d6aea1e269cda99aafd

As for ideas to make a more generic version, I suppose it boils down to either:

1) Reading config as I do somehow, and building upon install 2) Suggesting deep import as the way to import icons, which isn't ideal 3) Figuring out how Rollup's treeshaking works and see if there is a way to make this more-treeshakeable, which I'm not 100% sure is possible.

quentincaffeino commented 3 years ago

Experiencing same thing with vite. But I wouldn't call it an issue and here is why:

import { X } from "Y"

Packagers such as vite, snowpack compile components on demand, which means when you include a dependency it has to first load package.json and choose (based on compiler settings) which file to use as an entry point for dependency usage, for this repo it's index.js. Then since compiler doesn't know yet where is X it has to compile whole dependency.

Maybe sapper does something similar.

IMO importing component directly isn't that bad.

NazimHAli commented 3 years ago

To reduce the build time you can import the svelte component directly:

import HomeIcon from "svelte-feather-icons/src/icons/HomeIcon.svelte";

If there are ways to reduce the treeshaking cost, I would love to hear it.

This is what I started doing recently. Having hundreds of network requests for every icon while developing isn't ideal :sweat_smile: