背景

我司在在某个环境下部署的网站打开特别慢，反馈让优化一下。

优化之前

通过网络查看了一下，发现主要问题在于有一个js文件太大了，体积有9M，部分人在网络不好的情况下打开需要长达20s的加载时间

优化思路

• 优化打包体积
  • 分包，按需加载
  • 压缩打包后的体积 当时考虑了一下当前项目的复杂度也不高，所以决定先直接压缩一下打包后的js体积，看看效果怎么样

压缩打包体积

因为当前浏览器对gzip的压缩支持度比较好，而且压缩效果也不错，所以果断选择gzip压缩。

开启压缩的话，可以用nginx开启，但是这样每次请求资源的话，都要压缩，需要时间和占用服务器cpu资源， 不如前端打包的时候直接压缩完毕，省时省力。

webpack可以借助compression-webpack-plugin 插件在打包时生成 gzip

安装完依赖之后，使用很简单，直接一行命令就行

  plugins: [new CompressionPlugin()],
  

压缩之后

可以看出体积优化了将近99%，效果明显