前言

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

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]\.";

这个配置有啥用？

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
            }
        }),