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?

Answer 1

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>  

Answer 2

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