建浏览器网站制作,怎样做订房网站,纯flash网站,潜江资讯网免费发布总结#xff1a;
主要优化方式#xff1a;
imagemin优化打包大小#xff08;96M-50M#xff09;#xff0c;但是以打包速度为代价#xff0c;通过在构建过程中压缩图片来实现#xff0c;可根据需求开启。字体压缩#xff1a;目前项目内引用为思源字体#xff0c…总结
主要优化方式
imagemin优化打包大小96M-50M但是以打包速度为代价通过在构建过程中压缩图片来实现可根据需求开启。字体压缩目前项目内引用为思源字体打包为24M。实践通过压缩字体会导致丢失一些属性而字蛛等插件压缩只支持静态资源对服务端获取的数据无法完美匹配。 目前解决方案仅用SourceHanSansSC-Medium字体舍弃Normal及Regular字体。Gzip前端50M-46M针对css,js等代码进行压缩。Gzip服务端通过nginx.conf的镜像文件实现前端配置本地构建速度(134s-67s)通过引入CDN和Echarts按需加载方式提升本地构建速度目前已接近优化的极限因为目前项目基本框架为vben-admin官网并不推荐后期为更换为vben-admin-thin官网纯净版代码打包速度为122s
仍需优化
服务端用pnpm官网推荐下载打包速度更快删除框架内无用的组件可更换为vben-admin-thin一劳永逸)
以下为详情过程~
dev环境现况 ● LCP (Largest Contentful Paint) 代表的是视窗最大可见图片或者文本块的渲染时间。一般是至少75%用户能够在2.5秒内。
● 项目打包为将近97M
● 本地构建速度约134s。
具体步骤
1、安装 rollup-plugin-visualizer 插件此插件可以展示构建时长、chunk 数量及大小目前可以分析为项目内最大占比为静态资源。
2、通过imagemin插件压缩图片并删除无用图上压缩后的体积减少到50M 3、gzip前端代码压缩 4、cdn引入的vue, vue-router ,ant-design-vue 5、按需加载echarts
现况 ● 打包后的体积为46M ● 可以看到目前最大的模块不再是静态资源 而是echarts等外部资源库
● 同样以我本地为测试环境打包速度优化至65s
● 优化后的首屏加载速度为2s内
