Repository nuxt.js

Long hot reload due to SASS processing

LordGuard
5
LordGuard
commented 2 months ago

Version

v2.0.0

Reproduction link

https://nuxtjs.org

Steps to reproduce

Upgrade a large project to Nuxt 2.0.0.

What is expected ?

Fast hot reload

What is actually happening?

After updating the project to nuxt 2.0 hot reload started to work very slowly. At any change, the sass-loader processes styles in all .vue files. It takes more than 30 seconds.

bug
0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented a month ago

Yeah, I've started to get same issues recently, especially on relatively big vue files (+100 lines of code). It sometimes takes more than a minute to recompile and sometimes the process just shut down with a memory overflow error

0
LordGuard
5
LordGuard
commented a month ago

Still up to date. Sass is re-processed in all files even if the change did not affect the styles at all.

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented a month ago

Is it possible to do a partial recompile of only those parts that were changed?

0
XavierLeTohic
0
XavierLeTohic
commented a month ago

Running nuxt dev it takes 102s before the app become available.
sass-loader is extremely slow, we are customizing element-ui sass variables and using a theme.

0
manniL
2.5k
manniL
commented a month ago

After digging through a lot of material I don't see much we can do. sass-loader does not cache imports/partials and will recompile everything. You could try https://github.com/yibn2008/fast-sass-loader or enabling the experimental options parallel and cache (https://nuxtjs.org/api/configuration-build#parallel).

Also things like sourcemap compilation slows down the build as well.

0
LordGuard
5
LordGuard
commented a month ago

After digging through a lot of material I don't see much we can do. sass-loader does not cache imports/partials and will recompile everything. You could try https://github.com/yibn2008/fast-sass-loader or enabling the experimental options parallel and cache (https://nuxtjs.org/api/configuration-build#parallel).

Also things like sourcemap compilation slows down the build as well.
But why did it work much faster before nuxt 2.0?

0
manniL
2.5k
manniL
commented a month ago

@LordGuard That's hard to tell without a reproduction repository ☹️

0
XavierLeTohic
0
XavierLeTohic
commented a month ago

We have successfully removed sass-loader from Nuxt and using fast-sass-loader instead, our build went down from 102s to 42s.

Here is the code to replace sass-loader with fast-sass-loader in nuxt.config.js

// Replace all occurences of sass-loader with fast-sass-loader as Nuxt keep
      // use both during the build
      config.module.rules = config.module.rules.map(rule => {
        // sass-loader is only inside "oneOf" attribute
        if (!rule.oneOf) {
          return rule;
        }
        const newRule = rule;
        newRule.oneOf.map(r => {
          if (!r.use.some(l => l.loader === 'sass-loader')) {
            return r;
          }
          const newLoaders = r;
          newLoaders.use = newLoaders.use.reduce((loaderAcc, loader) => {
            if (loader.loader !== 'sass-loader') {
              return [...loaderAcc, ...[loader]];
            }
            return [...loaderAcc, ...[{
              loader: 'fast-sass-loader',
              options: loader.options,
            }]];
          }, []);
          return newLoaders;
        });
        return newRule;
      });
0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented a month ago

@Atinux @manniL will this code be added to Nuxt official code at some point? I think 50% speed boost is worth switching

0
pi0
18.3k
pi0
commented a month ago

I will try fast-sass-loader on a project afternoon. If it really worth, we can write an official module 😊

0
manniL
2.5k
manniL
commented a month ago

@pi0 Something in the style of https://github.com/Developmint/nuxt-svg-loader comes to my mind. I guess I'll create one 🙊

0
XavierLeTohic
0
XavierLeTohic
commented a month ago

Be careful fast-sass-loader have issues with custom aliases using Nuxt such as @ or $ but work well with the default ~.
There is already a lot of issues on fast-sass-loader repository about it.

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented a month ago

@XavierLeTohic in scss/sass files $ should be reserved to defining a variable so I don't think there is any possibility to use it for Nuxt specific purposes. Speaking about @ it's also reserved for css @ rules so it won't be available inside scss context. The only place it's used by Nuxt is inside js imports afaik so I don't think it's a show stopper

0
XavierLeTohic
0
XavierLeTohic
commented a month ago

Yeah sorry it was just an example, I forgot that case with sass. I should have say "With any custom aliases"

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented 18 days ago

@pi0 any updates on this one?

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented 14 days ago

Guys, I've came across very disturbing issue. It's related to using build.styleResources option that built into Nuxt. When it's enabled all dependent sass modules are being recompiled twice on every change even if the change happened in some unrelated js file. In my project I have quite a lot of resources I need to inject into Vue files so just give you some numbers.
build.styleResources - off: hot reload time 1 sec
build.styleResources - on: hot reload time 1 MINUTE
Although when I use plugin with similar functionality nuxt-sass-resources-loader build speed is back to normal with the same setup
I plan to add a separate bug about this, but just wanted to drop it quickly here because I think this stuff is related to the problem described in the current issue

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented 14 days ago

@XavierLeTohic I tried your config with fast-sass-loader but I didn't notice any significant build speed increase. For my project it was even slower, 49s - sass-loader 50s - fast-sass-loader (though I also have a lot of SCSS assets)
What I did notice is that your config doesn't play nice with nuxt-sass-resources-loader, maybe because it also uses sass-loader
I'm getting

Error: Mixin transition is missing argument $transition-time.

from building Bootstrap default assets

0
falstack
0
falstack
commented 12 days ago

Has there been any progress in this matter?

0
sergiocastrovale
38
sergiocastrovale
commented 6 days ago

Is it possible to do a partial recompile of only those parts that were changed?

This would definitely be the better option. To be honest, I went back to picking Laravel in a recent project solely because of how frustrating the wait is. Having to wait 20-30 seconds every time you save is a huge deal breaker.

What are the alternatives we can use as of now?

0
manniL
2.5k
manniL
commented 6 days ago

Hey folks! 👋

For anyone having problems, could you please:

  1. Run yarn build --profile (or the npm equivalent) and drop the stats in here?
  2. Provide a reproduction repository (if possible, I know not everyone can share code)
0
melrefaie
0
melrefaie
commented 5 days ago

@manniL

Some times when i save in dev it takes 2.30 min to save !!
Here is my build stats

Stats by Ext

Ext Requests Time Time/Request Description
js 223 757ms 3ms JavaScript files
vue 2582 16s 6ms Vue Single File components
css 43 337ms 8ms css files
styl 9 1s 126ms styl files
eot 36 12ms 341μs eot files
woff 11 796μs 72μs woff files
woff2 11 874μs 79μs woff2 files
ttf 11 213ms 19ms ttf files
svg 40 23ms 578μs svg files
Total 2966 18s

Stats by Loader

Loader Requests Time Time/Request Description
babel-loader 821 2s 3ms Babel Loader
vue-loader 4238 31s 7ms Vue Loader
vue-style-loader 171 69ms 405μs Vue Style Loader
css-loader 844 14s 16ms Css Loader
postcss-loader 844 14s 16ms Postcss Loader
pug-plain-loader 606 2s 3ms Pug Plain Loader
stylus-loader 793 13s 17ms Stylus Loader
style-resources-loader 793 13s 17ms Style Resources Loader
url-loader 109 250ms 2ms Url Loader
Total 9219 1m

Hash: e55ce7f2580becbca517
Version: webpack 4.20.2
Time: 20755ms

server-bundle.json 12.8 MiB [emitted]
Entrypoint app = server-bundle.js
✨ Done in 83.09s.

0
aldarund
245
aldarund
commented 5 days ago

@melrefaie so in your case when u save in dev its longer than build? if so - do u have a component\page with a lot of nested tags?

0
sergiocastrovale
38
sergiocastrovale
commented 5 days ago

@manniL I'm not able to share the code but the use case is pretty simple:

  1. I have a variables.scss file which I need to load on a bunch of components in order to get access to scss vars like $dark, $light, $headergradient, etc.

  2. I can do so manually (include + full path) or use something like sass-resources-loader

  3. Every time I save a file, npm run dev seems to recompile those scss dependencies on EVERY file, which is silly in most cases (i.e. I'm saving nuxt.config.js and it starts rebuilding all my .vue components)

0
melrefaie
0
melrefaie
commented 5 days ago

in your case when u save in dev its longer than build?

Yes it takes longer time than build.

I don't have a lot of nested tags. but i have:
186 pages
75 component

I don't face this problem with small projects. but in large projects its nightmare to work with .

0
sergiocastrovale
38
sergiocastrovale
commented 5 days ago

in large projects its nightmare to work with

@melrefaie Is your issue similar to mine? Are you injecting SCSS into those components?

0
melrefaie
0
melrefaie
commented 5 days ago

@melrefaie Is your issue similar to mine? Are you injecting SCSS into those components?

@sergiocastrovale

I inject stylus in layouts, i use
<style lang="stylus">
inside pages and components and global file includes variables and mixins file inside nuxt.config

0
manniL
2.5k
manniL
commented 5 days ago

@melrefaie do you use style-resources-loader?

0
melrefaie
0
melrefaie
commented 5 days ago

@melrefaie do you use style-resources-loader?

@manniL yes i use it inside my nuxt.config.js file

/*
** Global variables
*/
styleResources: {
  stylus: './assets/css/global.styl'
},

i use
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1"

0
manniL
2.5k
manniL
commented 5 days ago

@melrefaie Could you try out something like https://github.com/BKWLD/nuxt-stylus-resources-loader as substitute?

0
melrefaie
0
melrefaie
commented 5 days ago

@manniL ok i will try it

0
Pinegin
0
Pinegin
commented 5 days ago

@manniL

faced the same problem.

Just tried instead:
styleResources: { scss: './assets/scss/all.scss', },

use:
modules: [ ['nuxt-sass-resources-loader', '@/assets/scss/all.scss'], ],

speed has increased many times.

0
manniL
2.5k
manniL
commented 5 days ago

@Pinegin Thanks for the ping back!

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented 5 days ago

@manniL that is the exact issue we were discussing some time ago. styleResources are not usable at this point due to some severe internal bug though external libs for same functionality handles it well!
The requirements for styleResources

  1. It should cache the result of injection and only rebuild when it's really necessary
  2. It should not compile code at all, only inject variables, functions and mixins, otherwise we can and up with a bunch of garbage in Vue files that we don't need
0
manniL
2.5k
manniL
commented 5 days ago

@AndrewBogdanovTSS Yeah, I saw you comment above too. I might have a solution for that ☺️

0
melrefaie
0
melrefaie
commented 5 days ago

@manniL Wow thank you.

Using nuxt-stylus-resources-loader solve my save time problem form 2.30 min on save to 1 or 2 second.

modules: [
    [
      'nuxt-stylus-resources-loader',
      resolve(__dirname, '~assets/css/vars.styl')
    ]
]

To any one see this comment don't use styleResources.

0
manniL
2.5k
manniL
commented 5 days ago

@melrefaie I'm working on a module to overcome ~all~ most perf issues for the style-resources-loader☺️ (Supporting SCSS, LESS and Stylus)

0
manniL
2.5k
manniL
commented 5 days ago

Will release a module as drop-in replacement that should be faster than the current solution 📦 🙌

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented 5 days ago

@manniL waiting for it! :) Will it be any different from nuxt-stylus-resources-loader or sass-resource-loeader ?

0
manniL
2.5k
manniL
commented 5 days ago

@AndrewBogdanovTSS It uses sass-resource-loader under the hood, but not exclusively :)

0
falstack
0
falstack
commented 5 days ago

should upgrade nuxt to v2.2.1, use nuxt-stylus-resources-loader as default?

0
sh
0
sh
commented 5 days ago

@manniL looking forward to your module 🎉

I ran into #4278 when making changes to our _vars.scss, fast-sass-loader fixed this but it is still taking around 50-70s.

I've replaced style-resources-loader with [email protected] (note: not nuxt-sass-resources-loader), but it seems to have issues with threads / webpack on the second change to vars.scss the whole process broke with an error.

We ended up replacing sass-loader and style-resources-loader with fast-sass-loader with the approach below.

It is still far from optimal and i believe that something is leaking somewhere when you do a change to a sass resource file that triggers a rebuild of all vue components.

We're using bootstrap (scss only) and have ~100 components (pages/components).

Our nuxt.config.js that allows us to avoid style-resources-loader:

  build: {
    loaders: {
      scss: {
        includePaths: [__dirname],
        data: `@import "assets/scss/style-resources.scss";`,
      },
    },

from @XavierLeTohic comment

    extend(config, { isDev, isClient, loaders }) {
      // use fast-sass-loader instead of sass-loader for now
      config.module.rules = config.module.rules.map(rule => {
        // sass-loader is only inside "oneOf" attribute
        if (!rule.oneOf) {
          return rule
        }
        const newRule = rule
        newRule.oneOf.map(r => {
          if (!r.use.some(l => l.loader === "sass-loader")) {
            return r
          }
          const newLoaders = r
          newLoaders.use = newLoaders.use.reduce((loaderAcc, loader) => {
            if (loader.loader !== "sass-loader") {
              return [...loaderAcc, ...[loader]]
            }
            return [
              ...loaderAcc,
              ...[
                {
                  loader: "fast-sass-loader",
                  options: loader.options,
                },
              ],
            ]
          }, [])
          return newLoaders
        })
        return newRule
      })
0
manniL
2.5k
manniL
commented 4 days ago

Everyone who used style-resources-loader can try out https://github.com/nuxt-community/style-resources-module ☺️ Feedback very welcome!

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented 4 days ago

@manniL not working for me.

× fatal file:///.../node_modules/@nuxtjs/style-resources/lib/module.js:1
  TypeError: require(...).withTag is not a function
  at Object.<anonymous> (file:///C:/Projects/Kare/front-end/node_modules/@nuxtjs/style-resources/lib/module.js:2:35)
  at Generator.next (<anonymous>)
0
manniL
2.5k
manniL
commented 4 days ago

@AndrewBogdanovTSS Ah, consola. Hmm. 1 sec. will update the pkg version and upgrade consola

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented 4 days ago

@manniL after I replaced withTag with withScope I'm proceeding to this error:

× fatal TypeError: Cannot read property 'resolveAlias' of undefined
  at normalizedObject.(anonymous function).wrappedValue.reduce (...\node_modules\@nuxtjs\style-resources\lib\module.js:30:35)
  at Array.reduce (<anonymous>)
  at styleResourcesEntries.reduce (...\node_modules\@nuxtjs\style-resources\lib\module.js:28:44)
  at Array.reduce (<anonymous>)
  at retrieveStyleArrays (...\node_modules\@nuxtjs\style-resources\lib\module.js:26:27)
  at ModuleContainer.nuxtStyledResources (...\node_modules\@nuxtjs\style-resources\lib\module.js:39:60)
  at Promise (C:\Projects\Kare\front-end\node_modules\nuxt\dist\nuxt.js:628:30
  at new Promise (<anonymous>)
  at ModuleContainer.addModule (...\node_modules\nuxt\d
  at promise.then (...\node_modules\nuxt\dist\nuxt.js:1
  at process._tickCallback (internal/process/next_tick.js:68:7)
  at Function.Module.runMain (internal/modules/cjs/loader.js:744:11)
  at startup (internal/bootstrap/node.js:285:19)
  at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)
Nuxt Fatal Error :(
error Command failed with exit code 1.
0
manniL
2.5k
manniL
commented 4 days ago

@AndrewBogdanovTSS 0.0.2 released with upgraded consola.

You try it with Nuxt 2.2, right?
Could you try it with nuxt-edge? (Also, we should move the discussion into the module repo, please open an issue there ☺️ )

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented 4 days ago

Yes, I'm trying with Nuxt 2.2
You got quite a lot of outdated dependencies http://take.ms/o0lWs

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented 4 days ago

Can confirm that this package only works with Nuxt 2.3 (edge) as of now

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented 4 days ago

Can't provide comparisons of speed since --profile mode is currently broken in Nuxt 2.3

0
manniL
2.5k
manniL
commented 4 days ago

Works with 2.2 as well since v0.1.1

0
manniL
2.5k
manniL
commented a day ago

I'll close this issue and suggest everyone who uses build.styleResources to switch to https://github.com/nuxt-community/style-resources-module/ instead. build.styleResources will be deprecated in 2.3 and likely removed/made optional in 3.0.

All other perf problems with preprocessors should be addressed in a new issue.

0
AndrewBogdanovTSS
63
AndrewBogdanovTSS
commented 14 hours ago

@manniL your new lib be integrated into Nuxt at some point instead of build.styleResources ? Seems quite logical to me

0
Informations
Bug ReportOpen
#c7850 - Created 2 months ago