前端性能优化一般来说分为三个部分
第一部分 代码质量
代码质量好的代码必然决定着页面性能的效果, 这部分过于重要, 这部分直接关系着页面的反应效果, 好在现在有很多的框架 (vue, react, angular) 只要我们按规范书写代码, 一般都能写出不错的项目
当然一些必要的优化还是很有必要的
1 路由懒加载
能够有效的提高首屏加载速度, 只有当我们访问我们的页面的时候 关于页面的代码才会被浏览器所加载
2 组件按需加载
现在的项目一般都会引入一些ui库, 其实有的时候我们并没有用到整个ui库, 没有使用到的组件对于我们的项目而言只会加大我们打包后的项目体积并没有任何作用
常见的ui库都是支持按需加载的, 虽然配置起来有点繁琐, 但是这是很有必要的
3 自定义组件的懒加载
我们自定义的组件其实也是支持懒加载的, webpack2 支持 ()=>import(组件地址) 的写法来支持
这能很有效的减小单个文件的大小
4 合理的组件划分
在vue中有的人喜欢一个页面就使用一个vue来书写, 所有的东西都在一个页面中书写个人感觉会让一个vue文件变得特别的大, 所有的方法, 所有标签都在一个页面中书写感觉会很混乱, 不便于阅读和维护
个人更倾向于页面的抽离, 不同的功能点, 抽离成不同的组件, 更加便于维护和阅读, 也能减小单个文件的体积
5 提高js代码的复用率
在项目中我们使用的函数能够抽离封装的尽量的抽离封装 便于维护 也能优化项目大小
6 提高css样式的复用率
可以封装一个自己的样式库 也能提高我们的开发效率
7 删除冗余代码和废弃代码
没用的东西不要留 如果将来要使用的话 我们可以根据git版本回溯来提取
第二部分 代码文件体积(这里指的是用于生产的代码)
1 减少http的请求数
浏览器在并发请求的时候, http请求的并发数量是有限制的, 即使api响应的很快, 浏览器也会阻塞请求, 可能会造成不同程度的卡顿
一般的做法是合并css,js,图片
减小文件体积和减少http请求 两者其实冲突的 我们需要按我们的需求分别选择
2 使用字体图标
字体图标的使用可以整合我们项目中使用的图标 (雪碧图也能有类似的效果但是个人感觉字体图标更加的方便)
在 vue-element-admin 项目中使用一个svgIcon这也是一种不错的解决方案 传送门
3 使用cdn加载依赖
我们打包后主要的js多大是我们可以通过script直接引入我们vuejs reactjs 或者其他用于生产的依赖来减小主要js文件的大小
在 bootcss 能找到我们常用的很多依赖包 建议使用.min.js 体积更小
也可以吧文件下载到本地引入到项目中
第三部分 网络加载部分
我们开发的页面能被所有人访问依赖着网络, 所以这部分的优化也是很重要的
1 缓存的合理配置
浏览器在访问一个页面的时候会首先查看本地缓存, 没有可用缓存的时候才会发起网络请求
我们生产环境使用的服务器一般是nginx, 相关配置方式的帖子很多 传送门
让css和js尽量缓存的久一点 html缓存的时间少一点 这样会便于我们发布新的版本 不会因为我们设置的缓存让用户那边迟迟不能看到最新的效果
2 开启gzip
gzip是一个http压缩传输的技术 能够减小网络传输时文件的体积 传送门
3 cdn服务器
cdn服务器的使用为了较小主服务器响应请求的压力 也能以更快的速度向用户发送页面资源
阿里云推出的全站代理就能做到这点 有能力的公司也可搭建自己的cdn服务