viz格式文件怎么打开（Vite打包性能优化之开启Gzip压缩）

在使用 vite 进行项目打包时    
    
    
   ，默认已经帮我们做了一些优化工作   


     


     


     

，比如代码的压缩



 




 




 




，分包等等    
    
    
   。除此之外   

   

   

  ，我们还有一些可选的优化策略    

     

     

     
，比如使用 CDN 




  




  




  




，开启 Gzip 压缩等   


     


     


     

。本文会介绍在 vite 中使用插件来开启 Gzip 压缩



 




 




 




。

Gzip

Gzip 是一种压缩算法  


  


  


 ，在网络传输中使用非常普遍   

   

   

  。随便打开一个网页     
     
     
     ，都使用了 gzip 压缩：

需要注意的是




   




   




   




，Gzip 压缩仅对于文本类型的资源有明显提示
 



 



 



，压缩后的体积大约是压缩前的 1/3    

     

     

     
。对于图片                    ，音视频等媒体资源 




    




    




    



，本身就采用了有损压缩
















，所以再使用 gzip 并不能得到很大提升                   ，有时候反而会适得其反




  




  




  




。

开启 Gzip

前端项目打包出的 js  



     



     



     


，css资源

















，非常适合使用 gzip 进行压缩  


  


  


 。

这样    
    
    
   ，用户浏览器收到服务器返回的 gzip 类型资源时   


     


     


     

，会自动解压缩     
     
     
     。这样



 




 




 




，既能减少带宽的损耗   

   

   

  ，也能加快资源传输的时间




   




   




   




。

Vite 社区插件中有一个 vite-plugin-compression    

     

     

     
，可以用来做 gzip 压缩
 



 



 



。请看示例                    。

未使用 gzip 压缩前




  




  




  




，打包后有一个很大的文件  


  


  


 ，控制台也给出了提示     
     
     
     ，使用 gzip 能大大减小文件体积：

安装插件：

pnpm add -D vite-plugin-compression

配置文件：

vite.config.js

import viteCompression from vite-plugin-compression export default defineConfig({ plugins: [ // ... viteCompression({ threshold: 1024000 // 对大于 1mb 的文件进行压缩 }) ], });

再次打包：

可以看到




   




   




   




，原来 2mb 多的文件
 



 



 



，经过压缩后还剩 663 kb                    ，压缩带来的提升非常明显 




    




    




    



。

插件的其他配置

filter：过滤器 




    




    




    



，对哪些类型的文件进行压缩
















，默认为 ‘/.(js|mjs|json|css|html)$/i’ verbose: true：是否在控制台输出压缩结果                   ，默认为 true threshold：启用压缩的文件大小限制  



     



     



     


，单位是字节

















，默认为 0 disable: false：是否禁用压缩    
    
    
   ，默认为 false deleteOriginFile：压缩后是否删除原文件   


     


     


     

，默认为 false algorithm：采用的压缩算法



 




 




 




，默认是 gzip ext：生成的压缩包后缀