前端性能优化 - 从服务器到代码

前端开发里，性能优化是老生常谈的事情，其实归根到底，主要也就是从两个部分着手：

• 服务器配置
• 代码级更改

而所谓性能优化，最直接的体现是“首屏加载速度”，现在前端用的技术栈基本都是SPA，即Single Page Application，基于React / Vue / Angular 进行前端开发，而这免不了涉及到很多的性能优化

根据上述的两大分类，目前工作、学习上接触、实践到、已应用到生产上的细化点如下：

服务器配置

• Nginx部署模式中，配置Gzip
• Node部署模式中，配置Gzip

代码级更改

• 引入懒路由，实现代码分片
• 优化首屏渲染
• 压缩打包，webpack配置
• 引入优质CDN

*打包优化配置

这一大点严格来说不算性能优化，但是对项目也进行了一定程度上的改良

• 生产去掉console
• 打包时添加版本号，用以： 1) 生产部署后，检查部署资源是否正确。2)一定程度解决在混合模式开发时的缓存问题
• 打包时输出静态报告文件，用以分析、压缩代码
• 配置项目相对路径
• 全局配置rem且将其应用到所引用的UI库中（解决某些UI库比如antd, antd-mobile组件是用px的痛点）