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文件中更好地进行缓存和预加载隔离。通过仅下载和解析所需的资源,它也可以提高页面性能。