使用Gzip压缩ext-all文件

安装:
下载该文章附件 gzip-1.3.12-1-setup.rar (注:该版本只适用于windows)
获取其他版本:http://www.gzip.org/
[color=red][b]请安装到非中文及无空格目录下[/b][/color]

使用方式:
[img]http://dl.iteye.com/upload/attachment/0067/0085/96d70ad3-99a2-328f-b02b-e0dff040b681.jpg[/img]

生成后的名称为:比如 ext-all.js -> ext-all.js.gz

其他命令请输入右侧内容进行查看:gzip -h
user www-data; pid /run/nginx.pid; # 加载动态模块(必须放在最顶部) load_module modules/ngx_http_brotli_filter_module.so; load_module modules/ngx_http_brotli_static_module.so; events { worker_connections 2048; multi_accept on; use epoll; } http { # 基础设置 sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; server_tokens off; client_max_body_size 20M; # 文件描述符缓存 open_file_cache max=10000 inactive=30s; open_file_cache_valid 60s; open_file_cache_min_uses 2; open_file_cache_errors off; # 大文件传输优化 directio 4m; output_buffers 4 512k; aio threads; # MIME类型 include /etc/nginx/mime.types; include /etc/nginx/conf.d/*.conf; default_type application/octet-stream; # 日志格式 log_format main '$remote_addr - $remote_user [$time_local] ' '"$request" $status $body_bytes_sent ' '"$http_referer" "$http_user_agent"'; log_format timing_debug '$remote_addr - $remote_user [$time_local] ' '"$request" $status $body_bytes_sent ' 'ReqTime=$request_time UpstreamTime=$upstream_response_time ' 'ConnectTime=$upstream_connect_time ' 'DNSResolve=$upstream_cache_status ' 'Proto=$server_protocol Host="$host" ' 'UA="$http_user_agent" ' 'Encoding=$sent_http_content_encoding'; access_log /var/log/nginx/access.log main; error_log /var/log/nginx/error.log warn; access_log /var/log/nginx/time_monitor.log timing_debug; # SSL优化 ssl_protocols TLSv1.2 TLSv1.3; ssl_prefer_server_ciphers on; ssl_session_cache shared:SSL:10m; ssl_session_timeout 10m; ssl_session_tickets off; # 压缩配置 gzip on; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_min_length 1024; gzip_buffers 16 8k; gzip_http_version 1.1; gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml application/xml+rss image/svg+xml; brotli on; brotli_comp_level 6; brotli_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml application/xml+rss image/svg+xml; # 主服务器配置 server { listen 443 ssl http2; server_name login.coolla.online; # SSL证书配置 ssl_certificate /etc/letsencrypt/live/login.coolla.online/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/login.coolla.online/privkey.pem; include /etc/letsencrypt/options-ssl-nginx.conf; ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; root /www/data1; index index.html; http2_max_concurrent_streams 128; # 压缩头设置 add_header Content-Encoding-Mirror "br,gzip"; # Certbot验证目录 location ^~ /.well-known/acme-challenge/ { allow all; root /var/www/certbot; default_type "text/plain"; } # API代理配置 location /api { proxy_pass http://172.31.85.246:8080/api; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Authorization $http_authorization; proxy_set_header Cookie $http_cookie; proxy_pass_request_headers on; proxy_connect_timeout 60s; proxy_read_timeout 300s; # CORS配置 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; if ($request_method = 'OPTIONS') { return 204; } } location / { try_files $uri $uri/ /index.html; } # 静态资源优化配置 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp|woff2|html|json)$ { expires 1y; add_header Cache-Control "public, immutable, max-age=31536000"; access_log off; # 压缩文件支持 brotli_static on; gzip_static on; gunzip on; # 文件查找顺序:原始文件 > brotli > gzip try_files $uri $uri.br $uri.gz =404; # 文件缓存优化 open_file_cache max=5000 inactive=1h; open_file_cache_valid 60s; open_file_cache_min_uses 3; open_file_cache_errors off; # 性能优化 etag off; if_modified_since exact; tcp_nodelay on; } # 8080端口耗时监控端点 location = /api/time-monitor { internal; proxy_pass http://localhost:8080; proxy_set_header X-Request-Start "t=${msec}"; proxy_connect_timeout 2s; proxy_read_timeout 5s; proxy_send_timeout 3s; allow 127.0.0.1; allow 192.168.1.0/24; deny all; add_header X-Time-Monitor "active"; add_header Cache-Control "no-cache"; if ($arg_debug = "1") { add_header X-Debug-Info "Timing: $request_time/$upstream_response_time"; } } # 安全设置 location ~ /\. { deny all; access_log off; log_not_found off; } } # 8082端口监控服务 server { listen 8082; server_name _; root /www/manager; index index.html index; # 静态资源 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp|woff2)$ { expires 1y; add_header Cache-Control "public, immutable, max-age=31536000"; access_log off; brotli_static on; gzip_static on; gunzip on; try_files $uri $uri.br $uri.gz =404; } location / { try_files $uri $uri/ /index.html; } location /prod-api/ { proxy_pass http://localhost:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location ~ /\. { deny all; access_log off; log_not_found off; } } # HTTP重定向到HTTPS server { listen 80; server_name login.coolla.online; location ^~ /.well-known/acme-challenge/ { allow all; root /var/www/certbot; default_type "text/plain"; } location /api { proxy_pass http://localhost:8080/api; } location / { return 301 https://$host$request_uri; } location /error/ { alias /www/error/; index index.html; try_files $uri $uri/ /error/index.html; location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp|woff2)$ { brotli_static on; gzip_static on; try_files $uri $uri.br $uri.gz =404; } } } # 默认服务器配置 server { listen 80 default_server; server_name _; location /error { alias /www/error/; index index.html; try_files $uri $uri/ /error/index.html; location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp|woff2)$ { brotli_static on; gzip_static on; try_files $uri $uri.br $uri.gz =404; autoindex off; disable_symlinks off; if (!-f $request_filename) { return 404; } } } error_page 404 /404.html; location = /404.html { internal; root /usr/share/nginx/html; } error_page 500 502 503 504 /50x.html; location = /50x.html { internal; root /usr/share/nginx/html; } } } 这是我的配置文件#!/bin/bash # 日志函数定义 log_info() { echo "ℹ️ [$(date '+%Y-%m-%d %H:%M:%S')] $1" } log_success() { echo "✅ [$(date '+%Y-%m-%d %H:%M:%S')] $1" } log_error() { echo "❌ [$(date '+%Y-%m-%d %H:%M:%S')] $1" >&2 exit 1 } # 配置变量 REPO_URL="https://gitee.com/bizbutler_enterprise/bizbutlerbackweb.git" TARGET_DIR="/www/wj/bizbutlerbackweb" GIT_USER="donghaige" GIT_TOKEN="5d87a6d59233aaac1f08a269f3584c2b" BRANCH="master" PROD_DIR="/www/data1" # Nginx配置 NGINX_SERVICE="nginx" NGINX_CONFIG_TEST="nginx -t" NGINX_RESTART="systemctl restart nginx" # 压缩配置 COMPRESS_EXTENSIONS=("js" "css" "html" "json" "svg" "webp" "woff2" "png" "jpg" "jpeg" "ico") BROTLI_LEVEL=11 GZIP_LEVEL=9 # 智能压缩函数 compress_static_assets() { local dir="$1" cd "$dir" || return 1 log_info "开始压缩静态资源..." # 清理旧压缩文件 find . -type f \( -name "*.br" -o -name "*.gz" \) -delete log_success "已清理旧压缩文件" # 压缩处理 for ext in "${COMPRESS_EXTENSIONS[@]}"; do log_info "处理 .$ext 文件..." # Brotli压缩 find . -type f -name "*.$ext" ! -name "*.br" -print0 | xargs -0 -r -P $(nproc) -I {} brotli -k -q $BROTLI_LEVEL "{}" # Gzip压缩 find . -type f -name "*.$ext" ! -name "*.gz" -print0 | xargs -0 -r -P $(nproc) -I {} gzip -k -$GZIP_LEVEL "{}" done # 统计结果 BR_COUNT=$(find . -type f -name "*.br" | wc -l) GZ_COUNT=$(find . -type f -name "*.gz" | wc -l) log_success "压缩完成: $BR_COUNT 个 .br 文件, $GZ_COUNT 个 .gz 文件" cd - >/dev/null || return 1 } log_info "======= 开始构建部署 =======" # 1. 清理并重新克隆代码 log_info "步骤1: 清理旧代码并重新克隆仓库 (分支: $BRANCH)" if [ -d "$TARGET_DIR" ]; then log_info "删除现有目录: $TARGET_DIR" rm -rf "$TARGET_DIR" || log_error "删除目录失败: $TARGET_DIR" fi mkdir -p "$TARGET_DIR" || log_error "创建目录失败: $TARGET_DIR" cd "$TARGET_DIR" || log_error "进入目录失败: $TARGET_DIR" REPO_AUTH_URL="https://${GIT_USER}:${GIT_TOKEN}@gitee.com/bizbutler_enterprise/bizbutlerbackweb.git" git clone -b "$BRANCH" "$REPO_AUTH_URL" . || log_error "克隆仓库失败" COMMIT_ID=$(git rev-parse --short HEAD) log_success "仓库重新克隆完成! 提交ID: $COMMIT_ID" # 2. 安装依赖 log_info "步骤2: 安装npm依赖" npm install || log_error "npm安装失败" log_success "依赖安装完成" # 3. 构建项目 log_info "步骤3: 构建项目" npm run build || log_error "项目构建失败" log_success "项目构建完成" # 4. 部署到生产环境 log_info "步骤4: 部署到生产环境" mkdir -p "$PROD_DIR" || log_error "创建生产目录失败: $PROD_DIR" rm -rf "$PROD_DIR"/* || log_error "清理生产目录失败" cp -r dist/* "$PROD_DIR" || log_error "文件复制失败" log_success "静态文件已复制到生产目录" # 5.压缩静态资源 compress_static_assets "$PROD_DIR" # 6. 设置文件权限 log_info "设置文件权限" chown -R www-data:www-data "$PROD_DIR" find "$PROD_DIR" -type f -exec chmod 644 {} \; find "$PROD_DIR" -type d -exec chmod 755 {} \; log_success "权限设置完成" # 7. 完成检查 FILE_COUNT=$(find "$PROD_DIR" -type f ! -name "*.br" ! -name "*.gz" | wc -l) log_info "生产目录检查:" log_info "- 原始文件数: $FILE_COUNT" log_info "- 压缩文件数: $(find "$PROD_DIR" -type f \( -name "*.br" -o -name "*.gz" \) | wc -l)" if [ "$FILE_COUNT" -eq 0 ]; then log_error "生产目录为空,部署失败" fi log_success "生产目录文件检查通过" # 8. Nginx 重启 log_info "步骤8: 重启Nginx服务" log_info "执行配置检查: $NGINX_CONFIG_TEST" if ! $NGINX_CONFIG_TEST; then log_error "Nginx配置测试失败" fi log_success "Nginx配置验证通过" log_info "执行服务重启: $NGINX_RESTART" if ! $NGINX_RESTART; then log_error "Nginx重启失败" fi if ! systemctl is-active --quiet "$NGINX_SERVICE"; then log_error "Nginx服务未运行!" fi log_info "Nginx进程信息:" pgrep -a nginx | head -5 log_success "Nginx重启成功! 新PID: $(systemctl show -p MainPID nginx | cut -d= -f2)" # 完成报告 log_success "======= 部署成功! =======" log_success "✅ 项目位置: $TARGET_DIR" log_success "✅ 生产目录: $PROD_DIR" log_success "✅ 提交版本: $COMMIT_ID" log_success "✅ 压缩文件: $(find "$PROD_DIR" -type f \( -name "*.br" -o -name "*.gz" \) | wc -l) 个" log_success "✅ Nginx状态: $(systemctl is-active $NGINX_SERVICE)" log_success "✅ 完成时间: $(date '+%Y-%m-%d %H:%M:%S')" 这是我的脚本
08-07
'use strict' const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } const CompressionPlugin = require('compression-webpack-plugin') const name = process.env.VUE_APP_TITLE || '其亚管理系统' // 网页标题 const port = process.env.port || process.env.npm_config_port || 80 // 端口 // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这里只列一部分,具体配置参考文档 module.exports = { chainWebpack: config => { config.module .rule('tinymce') .test(/tinymce\/.*\.js$/) .use('babel-loader') .loader('babel-loader') .end() }, // 部署生产环境和开发环境下的URL。 // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上 // 例如 https://www.qiya.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.qiya.vip/admin/,则设置 baseUrl 为 /admin/。 publicPath: process.env.NODE_ENV === "production" ? "/" : "/", // 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist) outputDir: 'dist', // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下) assetsDir: 'static', // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 productionSourceMap: false, transpileDependencies: ['quill'], // webpack-dev-server 相关配置 devServer: { host: '0.0.0.0', port: 81, open: true, proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: `http://172.26.2.251:8081`, hangeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' }, } }, disableHostCheck: true }, css: { loaderOptions: { sass: { sassOptions: { outputStyle: "expanded" } } } }, configureWebpack: { name: name, resolve: { alias: { '@': resolve('src') } }, plugins: [ // http://doc.qiya.vip/qiya-vue/other/faq.html#使用gzip压缩静态文件 new CompressionPlugin({ cache: false, // 不启用文件缓存 test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式 filename: '[path][base].gz[query]', // 压缩后的文件名 algorithm: 'gzip', // 使用gzip压缩 minRatio: 0.8, // 压缩比例,小于 80% 的文件不会被压缩 deleteOriginalAssets: false // 压缩后删除原文件 }) ], }, chainWebpack(config) { config.plugins.delete('preload') // TODO: need test config.plugins.delete('prefetch') // TODO: need test // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() config.when(process.env.NODE_ENV !== 'development', config => { config .plugin('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-ext-html-webpack-plugin', [{ // `runtime` must same as runtimeChunk name. default is `runtime` inline: /runtime\..*\.js$/ }]) .end() config.optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, elementUI: { name: 'chunk-elementUI', // split elementUI into a single package test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app }, commons: { name: 'chunk-commons', test: resolve('src/components'), // can customize your rules minChunks: 3, // minimum common number priority: 5, reuseExistingChunk: true } } }) config.optimization.runtimeChunk('single') }) } }这个是我vue项目的vue.config.js文件配置,我现在想把项目打包部署到nginx上,我该怎么配置nginx
最新发布
08-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值