nuxt打包后css文件太多如何合并成一个文件？

Question

现有的nuxt项目，在打包过后的第一个页面，会加载很多个css文件，这些应该是*.vue文件里的<style></style>里的样式。
有办法将这些css合并成一个文件吗？或者按需加载，在加载到某个页面需要的时候才去加载这些css文件。

（我已经有在nuxt.config.js里，把extractCSS设置为true，搜索相关问题，都只是获得这个答案，并不能解决我的问题）

Answer 1

首先它确实加载了很多css文件，不过这个是在浏览器空闲时间的预加载,link preload 这是一个性能优化方式。https://developer.mozilla.org...

其次你很明显运用了懒加载，按需加载了组件，他目前已经是按需的状态，只不过nuxt或者你自己的nuxt配置启用了类似此类的插件https://www.npmjs.com/package... 将组件的css提升到html页面 preload

最后，如果你想强制将所有的css打包成一个文件,设置chunk groups

export default {
  build: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
}