前端性能优化66分涨到91分！
·
vite实现精确精细化css预加载。
首先下载对应的插件：npm i vite-css-preload-plugin
然后再vite.config里：export default defineConfig({ plugins: [preloadCss()] });
然后打包后查看对应的文件。如果html里有<link rel="preload" href="/xx/xx/xx/static/css/index-b66c873d.css" as="style">，则说明预加载成功了。
这个插件的原理是在打包完毕的时候，读取你的html，找到link css，然后加上preload后再复制一条并写入到html。很小的入侵。
目前支持vite>=4 , node >= 16.20。
我写这个插件，是因为之前用的css-preload插件，它会吧所有css都预加载。而我只需要在html里用到的那个css，保证首屏快就行了。那么这样的话，它那种一把梭哈css预加载对我来说反而是负优化。
成功打包效果和得分对比见下图：
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)