蓝景企业官网
案例介绍
背景：原官网长时间无人维护，且技术栈较老，有布局错乱、首屏加载缓慢等问题严重影响公司对外宣传展示和用户体验，便进行了全站重构
项目技术：Vue2+Vue-router+Vue-Cli+swiper+wow.js+vue-lazyload+baidu-map等
部署：腾讯TKE+Coding+腾讯云COS
负责内容： 官网全站的重构及优化
优化方面：使用webpack
1. 修改HTMLWebpackPlugin配置，将项目依赖包以CDN形式注入
2. 本地使用tinypng-com-cli批量压缩项目引用的图片资源
3. 使用ImageMinizerWebpackPlugin进行图片的二次压缩
4. 使用@bebel/plugin0transform-runtime抽离，减少JS体积
5. 配置optimization.splitChunks切分chunk
6. 使用CompressionWebpackPlugin进行GZIP压缩
成果：
1. 解决了旧官网布局错乱，首屏加载缓慢等问题
2. 运行性能大幅提升，通过Lighthouse检测：
Performance从50提升到了平均90+，最佳记录是99
FCP 从1.4s~3s 提升到了 +-0.7s
LCP 从3.6s 提升到了+-1.2s
Speed Index 从2.5s 提升到了+-1s
TTI 从3.4s 提升到了 +-1.2s
TBT 从50ms 提升到了 +-20ms
蓝景企业官网
案例介绍
2021.11-2021.12 蓝景企业官网(PC端) 负责人-开发者
背景：原官网长时间无人维护，且技术栈较老，有布局错乱、首屏加载缓慢等问题严重影响公司对外宣传展示和用户体验，便进行了全站重构
项目技术：Vue2+Vue-router+Vue-Cli+swiper+wow.js+vue-lazyload+baidu-map等
部署：腾讯TKE+Coding+腾讯云COS
负责内容： 官网全站的重构及优化
优化方面：使用webpack
1. 修改HTMLWebpackPlugin配置，将项目依赖包以CDN形式注入
2. 本地使用tinypng-com-cli批量压缩项目引用的图片资源
3. 使用ImageMinizerWebpackPlugin进行图片的二次压缩
4. 使用@bebel/plugin0transform-runtime抽离，减少JS体积
5. 配置optimization.splitChunks切分chunk
6. 使用CompressionWebpackPlugin进行GZIP压缩
成果：
1. 解决了旧官网布局错乱，首屏加载缓慢等问题
2. 运行性能大幅提升，通过Lighthouse检测：
Performance从50提升到了平均90+，最佳记录是99
FCP 从1.4s~3s 提升到了 +-0.7s
LCP 从3.6s 提升到了+-1.2s
Speed Index 从2.5s 提升到了+-1s
TTI 从3.4s 提升到了 +-1.2s
TBT 从50ms 提升到了 +-20ms
案例图片
相似案例推荐
-
喜藩官网
喜藩stylika官网 Web端 1.个人整体开发，包括
-
企业官网
是一个餐饮行业企业官方网站,大众餐饮创业护航者、可信赖的餐饮
-
某标书制作网站
门户网站，展示公司的主要业务内容，联系方式和动态的案例展示。
-
智慧党建
项目介绍：按照党的十八大和十八届三中、四中全会对党建工作的总
-
武汉南达，韵达OA，霏雨通讯
对公司网络、计算机、打印机、网络设备、监控设备管理和问题的解
-
综合执法处罚办案协同应用
通过该应用，执法中队可以和当事人通过线上的形式，完成案件办理
1小时精推人才
需求方专属客服，免费梳理匹配
