vue.js - 升级到 Nuxt 2 后，每个页面的样式都会加载到主页上

Question

升级到 Nuxt.js 2 后，我注意到主页加载时加载了大约 30 个 CSS 文件。当我检查 Google Pagespeed Insights 并看到大约 30 个“阻塞 CSS 资源”时，我实际上注意到了这一点。

是否有任何延迟加载它们的设置或类似的东西？

Answer 1

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>  

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