Vue/React的加载优化(高级篇)

高级优化

回到本文的开始的问题，答案就是HTTP压缩。

原理

现代浏览器在进行http请求的时候，普遍支持gzip压缩。这种优化不限制于webpack生成的bundle文件，css、html和图片都可以采用类似策略。在发出请求的时候， 会在http头部显示Accept-Encoding:gzip, deflate 也就是告诉服务器可以接受这两种压缩格式。

于是服务器就可以把vue.js文件压缩，并设置Content-Encoding:gzip。浏览器看到这个头部设置，自动解压缩。这种压缩可以减少至少60%的体积。 所以两个vue.js文件的显示大小不一样，因为CDN对返回的脚本进行了压缩传输。

实际操作

• express.js

  express.js项目中，如果使用app.use(express.static('xxx', [options]))，服务器会主动查看gzip请求， 如果有gzip header, 则将静态文件压缩并返回。当然也可以手动设置option参数。 但是这种压缩并非一劳永逸的，每次请求都要消耗服务器内部的部分资源。优化方法可以是提前压缩再放入路径。

  如果res.sendFile('vue.js')，默认是不压缩的。

• 阿里云OSS，AWS的S3，或者CDN

  如果把静态文件部署在OSS/S3上，默认不压缩。但是可以进行返回包http头的手动设置。

 

通过以上各种方式的叠加组合， 基本可以将原来庞大的文件减少为1/10甚至1/20，加载时间大幅减少。如ColorPK:)

以上步骤其实相对机械化，逐步完成就能达到效果。 当然，在项目代码内部，优化变量作用域，提高模块化和复用率等，其实更有意义和价值。 这部分抽空我再写一篇文章。