Sage 9 is slow as hell

sage9
#1

Sage 9 is slow as hell (build:production takes about 550 sec to finish :frowning: ) and I have no idea what I am doing wrong. On top of this I just got a Fatal Error, copied below:

[saboteur@XPS:sage|master *%]$ yarn run build && yarn run start
yarn run v1.3.2
$ webpack --progress --config resources/assets/build/webpack.config.js
                                    Asset     Size  Chunks                    Chunk Names
                    scripts/customizer.js  3.25 kB       3  [emitted]         customizer
                       images/body_bg.jpg   412 kB          [emitted]  [big]  
vendor/fontawesome-webfont_af7ae505.woff2  77.2 kB          [emitted]         
 vendor/fontawesome-webfont_fee66e71.woff    98 kB          [emitted]         
  vendor/fontawesome-webfont_b06871f2.ttf   166 kB          [emitted]         
  vendor/fontawesome-webfont_912ec66d.svg   444 kB          [emitted]  [big]  
          vendor/ajax-loader_c5cd7f53.gif  4.18 kB          [emitted]         
                   vendor/lg_1d81c10e.svg   8.9 kB          [emitted]         
                         scripts/early.js   180 kB       0  [emitted]         early
                          scripts/main.js  51.5 kB       1  [emitted]         main
                          scripts/init.js  3.08 kB       2  [emitted]         init
  vendor/fontawesome-webfont_674f50d2.eot   166 kB          [emitted]         
                         scripts/admin.js   2.7 kB       4  [emitted]         admin
                          styles/main.css  10.5 MB       1  [emitted]  [big]  main
                         styles/admin.css  2.09 kB       4  [emitted]         admin
                     scripts/early.js.map   223 kB       0  [emitted]         early
                      scripts/main.js.map  56.1 kB       1  [emitted]         main
                      styles/main.css.map  39.6 MB       1  [emitted]         main
                      scripts/init.js.map  3.26 kB       2  [emitted]         init
                scripts/customizer.js.map  3.07 kB       3  [emitted]         customizer
                     scripts/admin.js.map  2.72 kB       4  [emitted]         admin
                     styles/admin.css.map  5.23 kB       4  [emitted]         admin
                       images/body_bg.png  2.72 MB          [emitted]  [big]  
Done in 5.75s.
yarn run v1.3.2
$ webpack --hide-modules --watch --config resources/assets/build/webpack.config.js

Webpack is watching the files…

[BS] [HTML Injector] Running...
[Browsersync] Proxying: http://localhost:3000
[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:3001
    External: http://10.10.46.84:3001
 ------------------------------------
          UI: http://localhost:3002
 UI External: http://10.10.46.84:3002
 ------------------------------------
[Browsersync] Watching files...

<--- Last few GCs --->

[20543:0x555b07a89220]  1280948 ms: Mark-sweep 1292.7 (1401.4) -> 1292.7 (1401.4) MB, 80.1 / 0.0 ms  allocation failure GC in old space requested
[20543:0x555b07a89220]  1281030 ms: Mark-sweep 1292.7 (1401.4) -> 1292.7 (1351.4) MB, 81.8 / 0.0 ms  last resort GC in old space requested
[20543:0x555b07a89220]  1281118 ms: Mark-sweep 1292.7 (1351.4) -> 1292.7 (1344.9) MB, 87.9 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x3d3f9bd25e91 <JSObject>
    1: DoJoin(aka DoJoin) [native array.js:~95] [pc=0x260db54f338f](this=0x809d2882311 <undefined>,p=0x18be50ec5129 <JSArray[2]>,q=2,E=0x809d28823b1 <true>,A=0x809d2882471 <String[0]: >,z=0x809d2882421 <false>)
    2: Join(aka Join) [native array.js:~120] [pc=0x260db5491729](this=0x809d2882311 <undefined>,p=0x18be50ec5129 <JSArray[2]>,q=2,A=0x809d2882471 <String[0]: >,z=0x809d2882421 <false>)
  ...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [node]
 2: 0x555b0555ecef [node]
 3: v8::Utils::ReportOOMFailure(char const*, bool) [node]
 4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [node]
 5: v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [node]
 6: v8::internal::Runtime_StringBuilderConcat(int, v8::internal::Object**, v8::internal::Isolate*) [node]
 7: 0x260db4b8463d
error Command failed with signal "SIGABRT".

What the hell am I doing wrong? I uploaded the content of the sage folder here: https://drive.google.com/file/d/1l7aFtQak4dxBoqjx25Q4XnjtGPW2e0Go/view?usp=sharing

#2

The first thing I’d look at is your main.scss and how you’re managing to generate a 10.5MB CSS file - that likely accounts for the slow processing and memory issues. It has to generate a sourcemap too and that is almost 40MB!

How did you get to this point? Have you added all these imports manually to your main.scss and if so, do you really need them all?

I also noticed you have a yarn-error.log file present and at the end of the file it has a message about not being able to CHMOD so maybe you have some deeper permissions problems with your system setup.

Did you have errors when you first ran yarn?

#3

My main.scss:

@import "common/variables";
@import "common/mixins";

// Import Bulma default functions.sass
@import "~bulma/sass/utilities/functions.sass";

// Import Bulma derived variables from override file
@import "common/derived-variables.scss";

/** Import everything from autoload */
@import "./autoload/**/*";

/**
 * Import npm dependencies
 *
 * Prefix your imports with `~` to grab from node_modules/
 * @see https://github.com/webpack-contrib/sass-loader#imports
 */
// @import "~some-node-module";

// Import npm dependencies
@import "~font-awesome/scss/font-awesome";
@import "~slick-carousel/slick/slick.scss";
@import "~slick-carousel/slick/slick-theme.scss";
@import "~lightgallery.js/src/sass/lightgallery.scss";

/** Import global  styles */
@import "common/global";

/** Import theme styles */
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/wp-classes";

/** Import layouts **/
@import "layouts/footer";
@import "layouts/header";
@import "layouts/navbar";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/sidebar";
@import "layouts/tinymce";
@import "layouts/forum";

// Import bundled sitebuild components
@import "vendor/acf";
@import "vendor/button-section";
@import "vendor/cookies";
@import "vendor/gallery";
@import "vendor/grid-section";
@import "vendor/image-section";
@import "vendor/news-section";
@import "vendor/ninja-forms";
@import "vendor/notifications";
@import "vendor/quote-section";
@import "vendor/slick-section";
@import "vendor/table";
@import "vendor/text-section";


[saboteur@XPS:styles|master *%]$ ls -alh */
autoload/:                                                                                                             
összesen 16K                                                                                                           
drwxrwxrwx 2 http http 4,0K nov   10 09.07 .                                                                           
drwxrwxrwx 7 http http 4,0K nov   10 09.07 ..                                                                          
-rwxrwxrwx 1 http http  209 nov   10 09.07 _bulma.scss                                                                 
-rwxrwxrwx 1 http http   82 nov   10 09.07 _fontawesome.scss                                                           
                                                                                                                       
common/:                                                                                                               
összesen 32K                                                                                                           
drwxrwxrwx 2 http http 4,0K nov   10 09.07 .
drwxrwxrwx 7 http http 4,0K nov   10 09.07 ..
-rwxrwxrwx 1 http http 4,4K nov   10 09.07 _derived-variables.scss
-rwxrwxrwx 1 http http 1,8K nov   10 11.56 _global.scss
-rwxrwxrwx 1 http http  626 nov   10 10.10 _mixins.scss
-rwxrwxrwx 1 http http 4,2K nov   10 09.07 _variables.scss

components/:
összesen 20K
drwxrwxrwx 2 http http 4,0K nov   10 09.07 .
drwxrwxrwx 7 http http 4,0K nov   10 09.07 ..
-rwxrwxrwx 1 http http    0 nov   10 09.07 _buttons.scss
-rwxrwxrwx 1 http http  423 nov   10 09.07 _comments.scss
-rwxrwxrwx 1 http http  279 nov   10 09.07 _forms.scss
-rwxrwxrwx 1 http http 1,6K nov   10 09.07 _wp-classes.scss

layouts/:
összesen 44K
drwxrwxrwx 2 http http 4,0K nov   10 09.07 .
drwxrwxrwx 7 http http 4,0K nov   10 09.07 ..
-rwxrwxrwx 1 http http 1,1K nov   10 09.07 _footer.scss
-rwxrwxrwx 1 http http  157 nov   10 09.07 _forum.scss
-rwxrwxrwx 1 http http 3,5K nov   10 09.07 _header.scss
-rwxrwxrwx 1 http http 7,3K nov   10 10.09 _navbar.scss
-rwxrwxrwx 1 http http  904 nov   10 11.14 _pages.scss
-rwxrwxrwx 1 http http   58 nov   10 09.07 _posts.scss
-rwxrwxrwx 1 http http  670 nov   10 09.07 _sidebar.scss
-rwxrwxrwx 1 http http  112 nov   10 09.07 _tinymce.scss

vendor/:
összesen 64K
drwxrwxrwx 2 http     http     4,0K nov   10 09.07 .
drwxrwxrwx 7 http     http     4,0K nov   10 09.07 ..
-rwxrwxrwx 1 http     http     1,1K nov   10 09.07 _acf.scss
-rwxrwxrwx 1 http     http      234 nov   10 09.07 _button-section.scss
-rwxrwxrwx 1 http     http      802 nov   10 09.07 _cookies.scss
-rwxrwxrwx 1 http     http     1,5K nov   10 09.07 _gallery.scss
-rwxrwxrwx 1 http     http     1,5K nov   10 10.10 _grid-section.scss
-rwxrwxrwx 1 http     http     1,5K nov   10 09.07 _image-section.scss
-rwxrwxrwx 1 http     http      507 nov   10 09.07 _news-section.scss
-rwxrwxrwx 1 http     http      532 nov   10 09.07 _ninja-forms.scss
-rwxrwxrwx 1 http     http       82 nov   10 09.07 _notifications.scss
-rwxrwxrwx 1 http     http     2,3K nov   10 10.23 _quote-section.scss
-rwxrwxrwx 1 http     http     3,0K nov   10 09.07 _slick-section.scss
-rwxrwxrwx 1 http     http      245 nov   10 09.07 _table.scss
-rwxrwxrwx 1 http     http      249 nov   10 09.07 _text-section.scss
-rwxrwxrwx 1 saboteur saboteur 2,0K nov   10 09.07 wp-admin.scss

I might be (over)using @extends? What do you recommend instead of that with Bulma?

#4

I don’t use Bulma and SASS is not my primary choice of pre-processor so I might not be the best one to answer that but I think you need to be careful using @extend:

If you examine the resulting code in main.css you will see it is quite scary and the majority of the file is giant lists of selectors (I counted more than 8000 lines in one block and that was just to set one or two CSS properties - not only is it a problem for file size but probably also for the browser having to parse all these selectors).

I can’t say for sure without digging deeper but it looks like you have some major issues with your CSS structure and the use of @extend. You could try looking at the processed file and see if you can figure out where most of the problems stem from based on the properties that are being set.

#5

Thank you for your help! I started commmenting out the lines from main.scss, so I can find the file where the issue is. I have to rewrite to not use extends, that is the issue definitely (long selector list, etc.).

#6

You’re welcome :slight_smile: I hope you are able to find a solution without rewriting everything!

#7

Ok, it gets more interesting. I left this content in my main.scss, so basically everything is commented out:

// @import "common/variables";
// @import "common/mixins";

// Import Bulma default functions.sass
// @import "~bulma/sass/utilities/functions.sass";

// Import Bulma derived variables from override file
// @import "common/derived-variables.scss";

/** Import everything from autoload */
// @import "./autoload/**/*";
// @import "./autoload/_bulma.scss";
// @import "./autoload/_fontawesome.scss";

/**
 * Import npm dependencies
 *
 * Prefix your imports with `~` to grab from node_modules/
 * @see https://github.com/webpack-contrib/sass-loader#imports
 */
// @import "~some-node-module";

// Import npm dependencies
// @import "~font-awesome/scss/font-awesome";
// @import "~slick-carousel/slick/slick.scss";
// @import "~slick-carousel/slick/slick-theme.scss";
// @import "~lightgallery.js/src/sass/lightgallery.scss";

/** Import global  styles */
// @import "common/global";

/** Import theme styles */
// @import "components/buttons";
// @import "components/comments";
// @import "components/forms";
// @import "components/wp-classes";

/** Import layouts **/
// @import "layouts/footer";
// @import "layouts/header";
// @import "layouts/navbar";
// @import "layouts/pages";
// @import "layouts/posts";
// @import "layouts/sidebar";
// @import "layouts/tinymce";
// @import "layouts/forum";

// Import bundled sitebuild components
// @import "vendor/acf";
// @import "vendor/button-section";
// @import "vendor/cookies";
// @import "vendor/gallery";
// @import "vendor/grid-section";
// @import "vendor/image-section";
// @import "vendor/news-section";
// @import "vendor/ninja-forms";
// @import "vendor/notifications";
// @import "vendor/quote-section";
// @import "vendor/slick-section";
// @import "vendor/table";
// @import "vendor/text-section";

Yet now yarn run build:production ran for 244.40s. Is that normal? :astonished:
The file main_86c45dd5.css is 0 byte in dist/ .

#8

Does this happen on a fresh copy of Sage? If you follow these instructions and simply run a yarn build:production does it still take this long? If so, the problem is probably not with Sage.

#9

I ran the same process with your code and it took a similar amount of time. A quick look at the Activity Monitor showed me what was going on: optipng goes crazy trying to optimise your huge 2.7MB image in images/body_bg.png. PNG optimisation is a heavy process and in my opinion, PNG is the wrong format for this image. I’d remove the PNG and keep the JPG version.

For reference: after removing the PNG image and re-running yarn build:production, it took about 5.5s total. All your Sage install needed was to go on a diet :wink:

#10

Jeez, I should start focusing (instead of stressing on deadline is coming)… :smiley:

Thanks Stephen, that solved the mystery - I forgot to delete it after I changed to .jpg (yeah, .png is totally wrong for this image). I think I liked better the way gulp handled these things: it printed the work currently in progress, so it was easier to debug.

#11

No worries - I’m just glad we could figure it out in the end :slight_smile:

I’m still getting used to Webpack too after Gulp… It’s an adjustment but hopefully it will be worth the effort in the long run.

Good luck with your deadlines!

#12

Thanks and thanks again for your help! :slight_smile: