Increase building speed of HTML and CSS (build.html_css) performance. - mgechev/angular-seed GitHub Wiki

Hello everyone, I using angular-seed for large enterprise project and I want to share with you one very good practice that I found.

If you have a large project based on this seed and you use Cocktail Hugo SASS or BEM or other large styles architecture, enhacmentyou will find very interesting issue with this task build html_css:

Without performance enhancement:

[10:45:28] Starting 'build.html_css'...
[10:47:20] Finished 'build.html_css' after 1.87 min

With performance enhancement:

[10:48:31] Starting 'build.html_css'...
[10:48:35] Finished 'build.html_css' after 4.14 s

I think you all see the difference, it's AWESOME!

Now, how we resolve it?

The problem was in tools/tasks/seed/build.html_css.ts

...
const appSCSSFiles      = join(Config.APP_SRC, '**', '*.scss');
const entrySCSSFiles    = join(Config.CSS_SRC, '**', '*.scss');
const abtractSCSSFiles  = join(Config.SCSS_SRC, '**', '*.scss');
...

Very interesting for us is this variable entrySCSSFiles.

So you can see that if we have more then 1 file it will decrease build performance in the linear progression. We don't want that, we can just use our main file that has all of this dependencies and includes, imports etc.

Making this easy step:

...
const appSCSSFiles      = join(Config.APP_SRC, '**', '*.scss');
const entrySCSSFiles    = join(Config.CSS_SRC, 'main.scss'); // or const entrySCSSFiles    = join(Config.CSS_SRC, 'main', '*.scss');
const abtractSCSSFiles  = join(Config.SCSS_SRC, '**', '*.scss');
...

And we will see a miracle ;)

Important Note: After this change, be aware all other files inside src/client/css directory will be not compiled, so you can add them to an array or still use boring and long-time compilation property join(Config.CSS_SRC, '**', '*.scss') that will include all SCSS files in this directory and decrease your build performance.