Стили каждой страницы загружаются на домашнюю страницу после обновления до Nuxt 2

Question

После обновления до Nuxt.js 2 я заметил, что при загрузке домашней страницы загружается около 30 CSS-файлов.Я действительно заметил это, когда проверил Google Pagespeed Insights и увидел около 30 «блокирующих CSS-ресурсов».

Есть ли настройки для их отложенной загрузки или что-то в этом роде?

Answer 1

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

Answer 2

Nuxt2 имеет разделение кода, и вы можете использовать все CSS-файлы только на текущей странице, поэтому у вас есть 2 способа объединения CSS, первый - это общий CSS во всем проекте, а второй - отдельный файл CSS для каждой страницы.используйте атрибут scoped в теге style.

, например:

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

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

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