Question

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

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

Answer 1

Nuxt2具有代码拆分功能，您只能使用当前页面中的每个css文件，因此您有2种方法来捆绑css，第一种是all项目中的通用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

升级到Nuxt 2后，每个页面的样式都会加载到首页上

2 个答案: