一篇文章让你搞懂各种压缩，gzip压缩，nginx的gzip压缩，Minification压缩

前言

同学们可能听过这些压缩，但是可能不是了解，这篇文章让你弄清他们

• webpack的gzip压缩和nginx的gzip压缩有什么区别？
• 怎样开启gzip压缩？
• Minfication压缩又是什么鬼？
• 怎样使项目优化的更好？
• 本篇文章讲的是其中疑惑的地方，具体的配置，大家还是去看webpack的官网

1. webpack开启gzip压缩

我们最好使用webpack的一个插件compresion-webpack-plugin，通过这个插件来配置项目打包时候的gzip压缩，这时候打包的时候就会生成两种文件，一个是原来没有压缩的文件，一个就是压缩的文件

2. 那么部署到nginx服务器到底该如何选择呢，他到底是使用的哪个打包的文件？

• 其实服务器还是使用的是没有压缩的文件，那我们开启gzip压缩有啥用呢？

• 别急我们需要配置nginx.conf文件，配置如下

   gzip_static on;
   gzip_proxied expired no-cache no-store private auth;
   gzip_disable "MSIE [1-6]\.";
  1
  2
  3

• 这个配置有啥用？

  nginx同时支持静态gzip和动态gzip

  有啥区别：

  • 静态gzip就是每次使用的是webpack插件的gzip压缩，直接使用.gz文件
  • 动态gzip就是使用nginx的gzip压缩，他是实时加载的（Cpu负载较高）

3. nginx到底使用静态gzip还是动态gzip呢

我们会同时使用这两种gizp,也就是如果webpack没有开启gzip的话，我们就使用动态gzip；如果开启了，我们就使用静态gzip，这也就是所谓的动静结合。

4. 如果想要压缩更高效，需要再配合Mification压缩,具体怎么配置请参照HtmlWebpackPlugin插件的配置

优点： Minification 能够删除空格符（whitespace）、注释符（comments）、无用的分号（semicolons）或是减少 hex 代码的长度

new HtmlWebpackPlugin({
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                minifyCSS: true // 压缩内联的 CSS
            }
        }),
1
2
3
4
5
6
7
8

给大家分享一个在线项目性能分析的网站

PageSpeed
大家可以根据上面的提示去优化自己的项目

总结

通过 Minification 来压缩这个 CSS 文件，你将节省 17% 的空间，而使用 Gzipping 能够节省 85%，将两种方法结合使用节省的空间是 86%。