nuxt优化

背景：详情页面First Contentful Paint (FCP)欠佳页面比例较大，影响SEO

流程

image.png
image.png

  • 针对性的进行代码优化

  • 对项目中的nuxt.config.js中的build设置以下属性


    image.png

  • 执行 以下脚本，进行项目间包体积的明细


    image.png

  • 执行结束可以看到包体积大小和占比


    image.png

以下就是针对性的进行优化
1、删除辅助插件Vconsole.js
2、删除element-ui的引入
3、删除vue-qr

看一下包体积的对比

image.png

很明显已经减少了很多无用包的体积

看一下网站测速页面的对比
删除无用依赖之前


image.png
image.png

删除之后


image.png
image.png

打包提示中部分静态资源图片太大


image.png

优化操作：压缩图片替换原来的图片
优化后（剩下三张是公司的奖项图，已压缩过但还是很大）


image.png

性能诊断跟网速也有很大关系，下图为周六上班时的评分结果


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容