Nuxt.js将css提取到link后，刷新加载时会闪屏？可能是你用的方式不对

nuxt.js关于如何从页面中将css提取到link，大家百度、谷歌后会发现关于nuxt.js的文章并不多，解决方法基本都是：

在nuxt.config.js下的build里添加 extractCSS: { allChunks: true } 这句话，如下图

有的同学会发现，npm run dev 后没有任何变化，不要着急，试下npm run build 再 npm start，就会成功了。

当然这个方法简单粗暴，同时也会带来一个小问题———在刷新加载css时，页面会出现闪烁，然后才会出现渲染好的页面。

其实nuxt.js 自己本身已经集成了extract-text-webpack-plugin这个插件，需要在plugins里面重写extract-text-webpack-plugin，属性allchunk改为true就可以实现。

关于extract-css-chunks-webpack-plugin，它通常在后台使用，所有CSS都将被提取到单独的文件中，通常每个组件一个。这样可以分别缓存CSS和JavaScript，如果有很多全局或共享CSS，则值得尝试。

为了解决闪烁的问题，不妨试试下面的方法：

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

这是提取css前的样子，比较凌乱

下面这张图片就是提取之后的样子，所有css 都放到了/nuxt/styles.css中了


注意：不建议将所有内容提取到单个文件中。提取到多个CSS文件中更好地进行缓存和预加载隔离。通过仅下载和解析所需的资源，它也可以提高页面性能。