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

Slow build time #10

Open
antony opened this issue Jan 16, 2021 · 4 comments
Open

Slow build time #10

antony opened this issue Jan 16, 2021 · 4 comments

Comments

@antony
Copy link

antony commented Jan 16, 2021

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
Copy link
Owner

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
Copy link
Author

antony commented Jan 30, 2021

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
Copy link

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
Copy link

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 😅

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

No branches or pull requests

4 participants