Стили каждой страницы загружаются на домашнюю страницу после обновления до 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

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>