前端开发的性能优化

　　任何开发都绕不开的一个话题就是性能优化，今天我们就来谈一谈前端开发过程中有哪些可以优化的点。
　　模块按需加载
　　我们基于React。js、Vue。js、AngularX创建好工程之后，因为业务的需要，我们很多时候都需要引入外部的依赖库，比如面向UI的ElementUI、Antd，如果我们不做任何配置直接引入，Webpack打包时很可能会把整个第三方库都打包进去，哪怕我们只是用了其中一个组件。
　　这个结果显然不是我们想要的，如果想要做到按需加载，我们就必须引入Import类似插件，这里推荐用babelpluginimport。ElementUI、Antd官网都会有按需加载的使用说明，以下截图是Antd的官方说明：
　　截图来源于Antd官网
　　此处已经说得很详细，antd默认已经支持treeshaking，在使用webpack1。x或者treeshaking失效的情况下需要做Import引入，否则不需要单独处理。如果你不确定按需加载是否已经正确运行，你可以比较下第三方库引入后与引入前比输出包大小增加了多少。
　　gzip压缩
　　工程发布前我们正常打包输出的文件都是html、js等资源文件，虽然我们对这些文件进行了公共抽取和混淆优化，但是这些文件还会存在动辄就上100k的问题，为了进一步优化文件大小，我们需要使用gzip压缩方案。以下是输出目录gzip文件与原始文件的比较：
　　从图可知，压缩比还是很可观的
　　为了达到上述目标，我们只需要在Webpack中配置gzip压缩的CompressionPlgin插件。
　　至此gzip的前端配置都已经完成，还有一个很关键的代理服务器配置，如果你使用的是Nginx，就需要在Nginx中开启gzip，如下：
　　图片截图自网络，侵删
　　PWA
　　PWA是一种设计理念，通过多种技术来提升WebApp的体验，其中我们使用最广泛的就是ServiceWorker技术，通过SW我们可以把页面缓存到设备本地，当用户下次点击页面时，会优先展示缓存的页面，然后SW在后台静默更新最新的缓存文件。
　　通过PWA技术，我们可以让用户打开页面的速度得到一个较大提升，提升用户留存率。
　　接口数据缓存
　　通过PWA我们实现了页面等资源文件的缓存，但是当用户访问页面时还是会发起接口数据的请求，如果我们的网络状况不佳或者我们的服务器压力较大，都有可能对页面数据的展示造成困扰，此时如果我们仿照PWA把接口数据缓存下来，用户体验会更加流畅。
　　数据缓存的方式有很多种，如LocalStorage、Cache等等，在手机端我们建议APP增持对Web数据的缓存接口，不管是从安全性还是可控性来讲，APP辅助缓存Web接口数据都要优于Web自己缓存数据。
　　今天就写这么多了，后期还会再补充。
　　图片来源于网络，侵删