我司目前项目已经经过了很多次优化了，期间通过webpack打包实践了很多种方式，包括样式文件通过 gulp 实现命令行级别输出到static目录下，避免了此类css的打包，通过 equire 插件实现了echarts的按需引入，换掉了momentjs替换成了轻量的dayjs，还有一些比较细的优化，在此就不一一列举了。
但是由于多页面配置，每个页面的js都挺大的，导致进入页面不是很流畅。期间曾经尝试了gzip，栽坑里了，由于需求原因又搁置了，近期手头工作比较少，又开始了踩坑的路途。
gzip是一种通用的压缩算法，可以降低网络传输的数据量，从而提高客户端浏览器的访问速度。由于浏览器向服务器发送请求，加载服务器响应的静态资源，当资源文件过大，会导致用户感受的加载时间较长，影响用户体验。
虽然浏览器还需要解压gzip文件，但这速度跟加载一个未压缩的文件相比，简直少得不要不要的了。
当然，我们可以通过采用其他优化方式并用提高页面加载速度，实在无济于事了，也可以加一朵旋转的 小菊花 [狗头]，但gzip的使用能大幅降低加载时间，何乐而不为呢？
由于项目是基于vue开发，在 vue.config.js 中添加下列配置即可。（react也大同小异）
然后你就可以通过执行，查看 /dist/ 文件夹下的变化了。
如果你需要比较详细的配置gzip打包，请移步 https://www.npmjs.com/package/compression-webpack-plugin
配置里中有一个 deleteOriginalAssets 属性，意思是删除源文件，一般为 false 即可，同时保留源文件和压缩后的 .gz 后缀文件。
当然这不是本篇文章的重点。重点是什么？当然是 坑 了！
由于现在的浏览器默认支持gzip压缩，你可以在请求头里看到 Accept-Encoding: gzip, deflate 得以确认。
我司服务器使用nginx做请求转发和实现简单的负载均衡。在网上，不乏有如何在nginx上开启gzip配置的博客或文章。其实蛮简单的，类似一下命令键入打开nginx配置文件：
再在 http 模块下添加这么几行配置：
命令行中报错，内容如下显示：
意思是“gzip_static”指令未知，无法被识别。
由于安装nginx时缺少了相应配置，需要添加 with-http_gzip_static_module 配置，在此之前需要先执行以下命令：
再在nginx安装目录下，重新编译和安装nginx，具体方式如下：
然后等待进程执行完，重新启动nginx即可。
通过以上的方式，nginx已经支持了 gzip_static 模块，以便nginx优先匹配 .gz 后缀文件返回。执行以下命令重新nginx：
好吧，正常情况下，是这样的。
但是...
如果你打开浏览器F12，刷新页面查看资源请求，发现静态资源的 Response Headers 属性中却没有 Content-Encoding: gzip 。喔豁...显然配置没有生效啊！
我们现在的问题发生在重启了nginx，新添加的模块却没有生效，浏览器还是获取的源文件。此时，我就开始百度了，百度大法好啊，各种回答都出来了。
nginx没有生效，可能是你的配置有误，语法不合法？检查一下：
结果命令行出现以下信息：
显示语法ok了，测试也通过了，说明正常启动了吧？打开浏览器，又查看了一遍资源加载......
第一种试过了，哭了。
那么nginx重启没生效，会不会是重启没成功啊？软的不行，来硬的呗。键入：
此时，进程中如果没有nginx， kill 命令生效了。此时，我重新在命令行中进入nginx命令行目录，运行 nginx -s reload ，意想不到的问题出来了。
我又重新试了kill命令又报错：
杀掉了主进程，却没有启动成功！
吓得我一个激灵看了一下页面，咦？
正常情况下，刷新页面，页面会由于nginx进程被 kill 导致页面无法访问。但是，页面依然能正常打开，俺不信邪，又试了好几个页面，果不其然都行。（不知道是该开心，还是该难过？）
查看进程列表中是否 nginx 的占用？
果不其然，的确有这个进程，再次通过 kill 命令删除PID进程号，再次执行之前命令，发现列表中nginx进程不复存在了。点此查看 彻底删除nginx进程
此时，我们刷新浏览器页面，地址访问不了了，确定nginx已经被彻底删除，此时执行 nginx重启命令 ，测试 gzip_static 测试是否成功应用。不出意外，nginx应用gzip应该是成功了。此时，你应该能成功看到 Request Headers 中的 Content-Encoding: gzip 了，明显能感到页面加载的速度变快了。
这次记录就到这了，希望对你能有帮助~Skr
UI前景广阔，需求巨大，就业范围广。熟练掌握专业技能，能够胜任多种工作岗位。ui设计方面的专业前景很不错，随着科技的发展，用户越来重视软件的终端体验，UI设计在人类的数字生活中已经无处不在，因此对具备综合能力版的UI设计人才需求也急剧上升，国内UI设计人才紧缺，UI设计师的职业前景和就业领域越来越宽广。
