2019前端性能优化方案目录
🔥前言
前端性能优化是个老生常谈的话题，基本入职两三年的程序员面试都会遇到这个问题。各个项目虽有不同，但思路相差不多。本文是对之前项目的前端性能优化做一个梳理，同时也希望能对社区的朋友有所帮助。
项目现状
目前做的项目（一款可视化平台，如果有了解过飞冰和稿定，大概比这两个要复杂一个层级）十分庞大且复杂，前端被分为10几个工程，又分为开发态和运行态，相互通过软链接依赖，总共将近200万行代码，分为两期，一期交接后用户才开始使用，这期间暴露了很多问题，其中就包括性能上的问题。
问题：
打开控制台，将network中的Online切换为Fast3G,点击控制台的Performance，点击刷新按钮，观测白屏时间，普通页面打开白屏时间需要5s,复杂页面需要14s
- 白屏时间：
地址栏输入网址后回车 - 浏览器出现第一个元素 - 首屏时间：
地址栏输入网址后回车 - 浏览器第一屏渲染完成
分析
- 编译的框架包太大
- 框架初始加载数据过多，逻辑繁琐
- 初始化加载了所有资源
- 服务端返回数据过于庞大且冗余
- 前端没有使用服务缓存
方案
1. 初始化页面加loding图
这其实没有优化加载时间，但是提升了用户体验。
2. 减少http请求和冗余数据
前端在初始化编辑窗口时分别通过了4个接口请求了不同资源。通过和后端协商将4个接口改为一个接口，同时对返回的数据进行删减，只返回前端使用到的数据。
3. 组件，路由懒加载
拆分页面。分担加载压力
4. 配置nginx优化
-
压缩文件
开启gzip可以在vue-cli2脚手架中把config/index.js中的productionGzip设置为truelocation { gzip on; //开启压缩 gzip_typestext/htmltext/plaintext/css; //指定需要压缩的文件类型，默认为text/html gzip_min_length 512; //需要进行压缩的最小文件大小（单位字节) } -
优化缓存分配
nginx使用缓存存储请求和返回数据，优化缓存分配可以节约内存空间以及减少cpu的使用。可以将常用的js，CSS和和图片设置在浏览器本地长时间缓存，这样用户第一次打开页面后，会在本地缓存上述内容，提高了以后打开的页面加载速度，节省服务端大量带宽。 -
配置白名单
5. 优化wepack打包机制
使用插件
件webpack-bundle-analyzer查看项目所有包及体积大小
- 精简打包代码,压缩代码
purifyCS打包优化去重去无效代码
UglifyJsPlugin对js文件进行压缩，从而减小js文件的大小，加速load速度。 注意此插件会拖慢webpack的编译速度，建议在开发阶段将其关闭，部署的时候再开启。
Tree Shaking删除没用到的代码。这样的功能对于构建大型应用时是非常好的 - 依赖按需引入 去除冗余依赖
如：iview ui采用按需引入 - 代码分包
- 去除非必要文件
6.使用CDN
CDN主要功能是在不同的地点缓存内容，通过负载均衡技术，将用户的请求定向到最合适的缓存服务器上去获取内容
7.预渲染
预渲染相对于SSR比较简单，预渲染可以极大的提高网页访问速度。无需服务器实时动态编译，采用预渲染，在构建时针对特定路由简单的生成静态HTML文件
使用prerender-spa-plugin 插件
8.ssr
客户端渲染：
又称为前端渲染，起源于js的兴起，ajax让前端渲染更加成熟，前端专注于ui，后端专注于逻辑，真正意义上实现了前后端的分离，通过约定好的API来交互，后端提供数据，前端根据数据生成DOM插入HTML页面。初次渲染大都是将原html中的数据标记{{}}替换，鼠标右击查看源码，页面代码不可以在源代码中看到，性能消耗在客户端
优点：减少服务器压力，可以实现局部刷新，无需每次都请求完整的页面，体验更好 缺点：前端耗时较多，首屏渲染慢，渲染前要下载一堆js和css文件，不利于SEO，爬虫看不到完整的代码
服务端渲染：
又称为后端渲染，服务器端在返回html之前，在html特定的区域特定的符号里用数据填充，再给客户端，客户端只负责解析HTML。鼠标右击点击查看源码时，页面代码可以在源代码中看到。性能消耗在服务器端，用户达到一定程度的时候，后端会考虑缓存部分数据，避免消耗过多的资源重复渲染。
优点：前端耗时少，首次渲染快，更快的内容到达时间,利于SEO
缺点：网络传输数据量大，占用部分服务器运算资源,用户体验差,不容易维护，前端修改部分html/css后端也要改
9.图片转base64
wepack中的url-loader对未设置或者小于limi设置的图片进行转换，以base64的格式被img的src所使用；而对于大于limit byte的图片用file-loader进行解析。
10.后台分布式部署，负载均衡
结语
以上是最常见的前端优化方案，更多细节没有写上，可参考其他文章，每一个点延伸都能做为一篇单独的文章去深入了解，本文仅作为一个参考目录。
