Sage 9 is slow as hell (build:production takes about 550 sec to finish
[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
Stephen
November 10, 2017, 11:00am
#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?
2 Likes
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?
Stephen
November 10, 2017, 11:51am
#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.
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.).
Stephen
November 10, 2017, 12:13pm
#6
You’re welcome
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? main_86c45dd5.css is 0 byte in dist/ .
1 Like
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.
Stephen
November 10, 2017, 2:32pm
#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
3 Likes
Jeez, I should start focusing (instead of stressing on deadline is coming)…
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.
Stephen
November 10, 2017, 2:52pm
#11
No worries - I’m just glad we could figure it out in the end
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!
Thanks and thanks again for your help!
2 Likes
) and I have no idea what I am doing wrong. On top of this I just got a Fatal Error, copied below:
I hope you are able to find a solution without rewriting everything!
