Karam
Articles34
Tags31
Categories11
实验室招新项目优化

实验室招新项目优化

问题

本地跑只是卡一下,但是上线跑了以后就卡在加载app.js上,查看了一下本地的app.js,总共24M,由于之前没有学过webpack优化打包,所以我是直接使用npm run build直接打包运行,这一下就提醒自己去学习了!

优化方式

路由懒加载

才知道原来vue-router支持路由懒加载,只在需要用到的时候加载js,分割了js文件,app.js文件大小直接减少了一半,加载速度也提升了一半,使用前加载app.js需要280ms左右,使用以后140ms左右

代码压缩

最开始的项目打包以后有20M,经过代码压缩和删除不必要图片以后,项目大小缩减为15M,加速代码的加载速度

gzip

把JS和CSS代码使用gzip压缩大小,加速客户端访问速率

按需加载

项目中使用了element和echarts,第三方依赖特别占内存,我觉得这可能是导致我的js代码加载过久的原因,试着删了elementUI的引入,速度直接从150ms左右降到50ms,看来element确实占了非常多的JS资源

使用CDN加速资源加载

项目中echarts和element-ui作为第三方资源,都过大了,又由于我们的服务器配置没那么好,界面会一直卡住,所以我直接删除了ehcarts的node_modules,改用CDN加速,在index.html中添加一个CDN地址,然后在vue-cli中提示使用extenal,这样我就可以在window下使用CDN的echarts资源了,原本下载在本地的echarts资源占了1.3M左右,加载在1.5s左右,使用CDN以后,大小在328K,而且加载速度也提升到300k左右

避免本地资源

原本服务器只有一台,而且后端并没有给我提供存储静态资源的地方,所以之前所有图片资源都是放在前端的,或者直接使用地址访问,直接导致了首页第一张图片由于地址是外网的,加载速度在7s左右,差不多的是,其他图片也这样,加载速度非常慢,导致页面显示感官不好,最后使用OSS存储静态资源,速度从7s提升到400k左右。
最开始使用字体,占用资源太多了,导致打包后的文件无论怎么压缩,大小都在15M左右,我索性直接将这两个字体给删了,打包后的文件大小直接骤减到1M,终于明白了为什么文件包每次都过大了