Every page's styles are loaded on homepage after upgrading to Nuxt 2

Question

After upgrading to Nuxt.js 2, I noticed that about 30 CSS files are loaded when the homepage loads. I actually noticed it when I checked Google Pagespeed Insights and saw about 30 "blocking CSS resources".

Is there any setting for lazy loading them or something like that?

score 0 · Answer 1 · answered Sep 23 '18 at 13:44

Nuxt2 has the code splitting and you can use the every css files in the current page only so you have 2 way for bundling css, first is the common css in the all project and second is an isolate css file for each page. use the scoped attribute in the style tag.

for example:

  //////// sample.vue//////
 <template>
           write somethin.....
 </template>

 <script>
           write som,ething.....
  </script>

  <style lang="scss" scoped>
    body {
          background-color: gray;
          color: #9e9e9e;
      }
  </style>

score 0 · Answer 2 · answered Sep 23 '18 at 17:26

0

export default {
  build: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
}

https://github.com/nuxt/nuxt.js/issues/3166#issuecomment-423832425

answered Sep 23 '18 at 17:26

Aldarund

17,312
5
73
104

1

That doesn't seem to have any effect. No css were merged. – Oct 01 '18 at 06:42
This might do the opposite of what was requested. – bassplayer7 Mar 07 '23 at 23:05

Every page's styles are loaded on homepage after upgrading to Nuxt 2

2 Answers2