vue打包如何开启gzip压缩 |
您所在的位置：网站首页 › 如何压缩gz文件 › vue打包如何开启gzip压缩 |
vue打包如何开启gzip压缩
|
gzip压缩可以减小资源文件原本的大小，使js、css等文件更快的加载，提升网站的性能。下面是没有压缩时的js加载情况   gzip压缩有两种方案： vue项目打包时生成.gz压缩文件，通过nginx直接返回。nginx实时生成.gz压缩文件并返回给客户端。前端方案vue.config.js const { defineConfig } = require('@vue/cli-service') const CompressionPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需引用 module.exports = defineConfig({ transpileDependencies: true, // 公共路径(必须有的) publicPath: "./", // 输出文件目录 outputDir: "dist", // 静态资源存放的文件夹(相对于ouputDir) assetsDir: "assets", // eslint-loader 是否在保存的时候检查(果断不用，这玩意儿我都没装) // lintOnSave:false, // 我用的only，打包后小些 productionSourceMap: false, devServer: { /* 自动打开浏览器 */ /* 使用代理 */ proxy: { '/api': { // 'target': 'https://api.tiansc.top/api/', 'target': 'http://localhost:3000', 'changeOrigin': true, // "secure": false, pathRewrite: { // 重命名 '^/api': '' } } } }, configureWebpack: { plugins: [ new CompressionPlugin({ algorithm: 'gzip', // 使用gzip压缩 test: /\.js$|\.html$|\.css$/, // 匹配文件名 filename: '[path][base].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz) minRatio: 1, // 压缩率小于1才会压缩 threshold: 10240, // 对超过10k的数据压缩 deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件） }), ] } })服务器nginx配置 http { include mime.types; default_type application/octet-stream; sendfile on; #tcp_nopush on; client_max_body_size 100m; #keepalive_timeout 0; keepalive_timeout 120; gzip_static on; server { listen 80; }}其中gzip_static on这个属性是静态加载本地的gz文件。打包压缩后，js文件小了很多，加载速度也大大提升。   nginx实时压缩这种方案不需要前端做特殊处理，前端打包生成常规的css、js等其他静态文件，nginx处理请求时会实时的压缩文件返回给浏览器。nginx配置如下 http { include mime.types; default_type application/octet-stream; sendfile on; #tcp_nopush on; client_max_body_size 100m; #keepalive_timeout 0; keepalive_timeout 120; # 开启gzip gzip on; # 设置缓冲区大小 gzip_buffers 4 16k; #压缩级别官网建议是6 gzip_comp_level 6; #压缩的类型 gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php; #允许压缩的文件最小字节 gzip_min_length 10k; server { listen 80; } }}gzip_min_length 属性指定允许压缩的文件最小字节，太小的文件压缩后可能反而会加载更慢，10K左右的文件压缩和不压缩加载速度差别不大，小文件不压缩可以节省服务端cpu性能。通过nginx压缩后的资源加载情况如下   nginx配置里的gzip属性和gzip_static 属性可以同时设置为on，gzip_static的优先级高，如果存在.gz静态资源会优先时候静态资源返回，若不存在，会实时生成压缩文件。 有些小伙伴就会纳闷，既然都开启的情况下，我们怎么区分使用了静态加载还是在线压缩呢？ 响应头的Content-Edcoding:gzip表示gzip压缩已经生效，而Etag中只有简单字符表示静态资源加载，而前面带 W/ 表示启动了在线压缩。 优缺点1、webpack打包，然后直接使用静态的gz，缺点就是打包后文件体积太大，但是不耗服务器性能；2、使用nginx在线gzip，缺点就是耗性能，需要实时压缩，但是vue打包后的文件体积小。 |
【本文地址】
今日新闻 |
推荐新闻 |