您的位置 首页 php

Vue3 开启Gzip压缩打包,使你速度更快

vue

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,减少文件大小。减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间。gzip 是在 Linux 系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用。

vue可以通过安装 compression-webpack-plugin 来实现gzip压缩,配置很容易。

  1. 安装插件
 npm i --save-dev compression-webpack-plugin  
  1. 在 vue.config.js 配置gzip压缩
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
         // ...
         configureWebpack: config => {
           config.externals = {    
                 AMap: "AMap", // 高德地图配置 
           }
               if (process.env.NODE_ENV === 'production') {
                    return {
                        plugins: [new CompressionWebpackPlugin({
                        test: /\.js$|\.html$|\.css/, // 匹配文件名
                        threshold: 10240, // 对超过10k的数据进行压缩
                        deleteOriginalAssets: false, //是否删除原文件
                    })]
               }
            // ...
 }  
  1. 配置Nginx
  server {
           listen       8080;
           server_name  demo;
   
            #开启或关闭gzip on off
           gzip on;
   #gzip压缩最小文件大小,超出进行压缩(自行调节)
           gzip_min_length 5k; 
           gzip_buffers 4 16k; #buffer 不用修改
           gzip_comp_level 8; #压缩级别:1-10,数字越大压缩的越好,时间也越长
           gzip_types text/plain application/json application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型 
           gzip_vary on; # 和http头有关系,加个vary头,给代理服务器用的,有的浏览器支持压缩,有的不支持,所以避免浪费不支持的也压缩,所以根据客户端的HTTP头来判断,是否需要压缩

           location / {
            root   /demo/dist;
            index  /index.html;
           }
         }  
  1. 如果是部署到tomcat里,配置tomcat也很简单
 <Connector 
connectionTimeout="20000" 
enableLookups="false" 
port="80" 
protocol="HTTP/1.1" 
redirectPort="8443" 
useBodyEncodingForURI="false"
compressableMimeType="text/html,text/xml,text/plain,text/javascript,text/csv,application/json,application/xml,application/x-javascript,application/javascript,text/css"
URIEncoding="utf-8"/>  

文章来源:智云一二三科技

文章标题:Vue3 开启Gzip压缩打包,使你速度更快

文章地址:https://www.zhihuclub.com/152921.shtml

关于作者: 智云科技

热门文章

网站地图