Carbon: First compilation and live reload are too slow

[bitforcesrl]

I'm referring to this issue which is closed but the problem is still there and other people are reporting that slowness

https://github.com/carbon-design-system/carbon/issues/3348

thanks

[joshblack]

Hey there @bitforcesrl! 👋

Unfortunately this is a problem that we see come up with projects using webpack and sass-loader. sass-loader in particular seems to be the cause of the slowdown whereas a fresh build using node-sass on the project takes <3s.

There are a couple of ways we suggest with optimizing this, probably the most notable will be following this guide: https://github.com/carbon-design-system/carbon/blob/master/docs/guides/sass.md#optimizing-your-sass-builds

This will help you import only the components that you use to help decrease the total time the project takes to compile. Similarly, splitting out these vendor styles from the styles you are authoring in your project will help out. In projects using webpack, this would be through separate sass imports.

Hope this helps!

[Addvilz]

Hi @joshblack - importing select components individually only makes sense when few components are used.

I did some profiling and unfortunately the live compile times increase drastically even with 1 (!!!) component included. Importing all the components makes live reload so slow to the point of being unusable. I also see some noticeable CPU load during the live compilation.

I suspect there is something both common and compute-heavy often being used, something that makes the whole build process highly resource heavy. It could also be related to sass-loader which I can't exclude at this time. That being said, I have never seen SASS build times so slow using any component framework I have used so far.

I will try to see about what that could possibly be, but it would be nice for you guys to do some profiling as well. I would really like to avoid doing dirty hacks like using a separately built carbon. I would not be able to use whatever stuff is exposed by Carbon in that case, and I would rather want to avoid that.

[bitforcesrl]

We are including only what is needed in our project, but the compilations is insanely slow.
There is for sure something wrong in the setup of the angular-carbon framework

[Addvilz]

FYI I am using Vue, not Angular. So the problem seems to be cross-framework.

[joshblack]

Sorry for the delay in responding here @Addvilz! Definitely agreed, long sass times are incredibly frustrating and we have experienced them on our end as well since we use the sass for our component development in storybook.

As you noted, sass-loader tends to be the bottleneck when we've profiled in previous iterations. If you compile the project with node-sass directly, you'll see it takes ~4-5s to compile the entire project.

As a result, we've ended up switching to fast-sass-loader for development. Totally understand that this isn't feasible for everyone, though. This is where that guide comes up, along with the guidance around making sure sass imports only occur once, or splitting vendor and custom styles into separate JS imports that separately recompile.

As we look towards our October major release, we're hoping to drop the mechanisms that tend to cause this slowdown. Under the hood, we use an import-once mixin that attempts to treat each sass file as a module. Since teams can import almost any path in the project, each file in turn will import the dependencies it needs (very much so like JS modules). This seems to the source of most of the slowdown and unfortunately is a decision that was made early on in the project's lifecycle (before I was on the team).

We're hoping to address this by removing this mechanism, defining an import order, and relying on Sass modules in the future to achieve the same behavior. Until then, this is where guides like the above come into play. Always happy to chat on Slack help debug locally, either through #carbon-react or #carbon-components 👍

[yabeow]

Hi @joshblack, I wonder if there're any progress on this issue?