Long hot reload due to SASS processing #3994
Comments
ghost
added
the
|
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 |
|
Still up to date. Sass is re-processed in all files even if the change did not affect the styles at all. |
|
Is it possible to do a partial recompile of only those parts that were changed? |
|
Running |
|
Related: webpack-contrib/sass-loader#296 |
|
After digging through a lot of material I don't see much we can do. Also things like |
But why did it work much faster before nuxt 2.0? |
|
@LordGuard That's hard to tell without a reproduction repository |
|
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 // 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;
}); |
|
I will try fast-sass-loader on a project afternoon. If it really worth, we can write an official module 😊 |
|
@pi0 Something in the style of https://github.com/Developmint/nuxt-svg-loader comes to my mind. I guess I'll create one 🙊 |
|
Be careful |
|
@XavierLeTohic in scss/sass files |
|
Yeah sorry it was just an example, I forgot that case with sass. I should have say "With any custom aliases" |
|
@pi0 any updates on this one? |
|
Guys, I've came across very disturbing issue. It's related to using |
|
@XavierLeTohic I tried your config with from building Bootstrap default assets |
|
Has there been any progress in this matter? |
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? |
|
Hey folks! 👋 For anyone having problems, could you please:
|
|
Some times when i save in dev it takes 2.30 min to save !! Stats by Ext
Stats by Loader
Hash: e55ce7f2580becbca517 server-bundle.json 12.8 MiB [emitted] |
|
@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? |
|
@manniL I'm not able to share the code but the use case is pretty simple:
|
Yes it takes longer time than build. I don't have a lot of nested tags. but i have: I don't face this problem with small projects. but in large projects its nightmare to work with . |
@melrefaie Is your issue similar to mine? Are you injecting SCSS into those components? |
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 |
|
@melrefaie do you use |
|
@manniL that is the exact issue we were discussing some time ago.
|
|
@AndrewBogdanovTSS Yeah, I saw you comment above too. I might have a solution for that |
|
@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. To any one see this comment don't use styleResources. |
|
@melrefaie I'm working on a module to overcome |
|
Will release a module as drop-in replacement that should be faster than the current solution 📦 🙌 |
|
@manniL waiting for it! :) Will it be any different from |
|
@AndrewBogdanovTSS It uses |
|
should upgrade nuxt to v2.2.1, use nuxt-stylus-resources-loader as default? |
|
@manniL looking forward to your module 🎉 I ran into #4278 when making changes to our I've replaced We ended up replacing 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 build: {
loaders: {
scss: {
includePaths: [__dirname],
data: `@import "assets/scss/style-resources.scss";`,
},
}, 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
}) |
|
Everyone who used |
|
@manniL not working for me. |
|
@AndrewBogdanovTSS Ah, consola. Hmm. 1 sec. will update the pkg version and upgrade consola |
|
@manniL after I replaced |
|
@AndrewBogdanovTSS 0.0.2 released with upgraded consola. You try it with Nuxt 2.2, right? |
|
Yes, I'm trying with Nuxt 2.2 |
|
Can confirm that this package only works with Nuxt 2.3 (edge) as of now |
|
Can't provide comparisons of speed since |
|
Works with |
|
I'll close this issue and suggest everyone who uses All other perf problems with preprocessors should be addressed in a new issue. |
|
@manniL your new lib be integrated into Nuxt at some point instead of |
Hey, |
|
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
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.
The text was updated successfully, but these errors were encountered: