0
点赞
收藏
分享

微信扫一扫

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

kolibreath 2022-12-07 阅读 124

前言

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

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

在这里插入图片描述
在这里插入图片描述

总结

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

举报

相关推荐

0 条评论