nginx正则匹配、全局常量

本文深入解析Nginx的location规则匹配、正则表达式应用、缓存设置、条件判断及变量使用,涵盖精准匹配、通配符使用、过期缓存管理、浏览器识别、文件与目录判断等多个方面。

1:Nginx location 规则匹配

^~          标识符匹配后面跟一个字符串。匹配字符串后将停止对后续的正则表达式进行匹配。

     		如:location ^~ /images/,  在匹配了/images、这个字符串后就停止对后续的匹配

=           精准匹配,如:location=/,只会匹配urrl为/的请求

~           区分大小写的匹配

~*          不区分大小写的匹配

!~          对区分大小写的匹配取非

!~*         对区分大小写的匹配取非

/           通用匹配,如果没有其他匹配,任何匹配请求都会被匹配到

2:正则表达式

*           重复前面的字符0次或多次

?           重复前面的字符0次或1+           重复前面的字符1次或多次

.           匹配除换行符以外的任意一个字符

(a | b)     匹配a或b

^.....开头

$           以.....结尾

{n}         重复前面的字符n次

{n,}        重复前面的字符n次或更多次

{n,m}       重复前面的字符n次到m次

*?          重复前面的字符0次或多次 ,但尽可能的少重复

+?          重复前面的字符1次或更多次 ,但尽可能的少重复

??          重复前面的字符0次或1,但尽可能的少重复

{n,m} ?     重复前面的字符n次或m次 ,但尽可能的少重复

{n,} ?      重复前面的字符n次以上 ,但尽可能的少重复

3:正则补充

\w          匹配任意不是字母,数字,下划线,汉子的字符

\s          匹配任意不是空白字符串的字符

\D          匹配任意非数字的字符

\B          匹配不是单词开头或结束的位置

[a]         匹配a-z小写字母的任意一个

[^a]        匹配除a以外的任意字符

4:过期缓存

expires      30d;

5:设置某些类型文件的浏览器缓存时间

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    expires 30d;
}
location ~ .*\.(js|css)$
{
    expires 1h;
}

6:针对浏览器

location / {
    if ($http_user_agent ~* chrome) {
        return 503;
    }
}

7:判断文件,文件夹

-f和!-f用来判断是否存在文件
-d和!-d用来判断是否存在目录
-e和!-e用来判断是否存在文件或目录
-x和!-x用来判断文件是否可执行

8:全局变量

$args                  请求中的参数,如www.abc.com/test/hello?a=1&b=2的$args就是a=1&b=2
$document_root         Nginx虚拟主机配置文件中的root参数对应的值
$document_uri          当前请求中不包含指令的URI,如www.abc.com/test/hello?a=1&b=2的document_uri就是/test/hello,不包含后面的参数
$host                  主机头,也就是域名
$http_user_agent       客户端的详细信息,也就是浏览器的标识,用curl -A可以指定
$http_cookie           cookie信息
$limit_rate            如果Nginx服务器使用limit_rate配置了显示网络速率,则会显示,如果没有设置,则显示0
$remote_addr           客户端的公网IP
$remote_port           客户端的端口
$request_method        请求资源的方式,GET/PUT/DELETE等
$request_filename      当前请求的资源文件的路径名称,相当于是$document_root/$document_uri的组合
$request_uri           请求的链接,包括$document_uri和$args
$scheme                请求的协议,如ftp、http、https
$server_protocol       客户端请求资源使用的协议的版本,如HTTP/1.0,HTTP/1.1,HTTP/2.0等
$server_addr           服务器IP地址
$server_name           服务器的主机名           
$server_port           服务器的端口号
$uri                   和$document_uri相同
$http_referer          客户端请求时的referer,通俗讲就是该请求是通过哪个链接跳过来的

常用:$http_referer    
    $request_uri  
    $http_user_agent  

9:案例

args:name=zhangsan&age=15
document_root:/home/wwwroot/default/wounion/dragonfly/public
document_uri:/test/hello
host:jiqing.wounion.com
http_user_agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.80 Safari/537.36
http_cookie:PHPSESSID=3ire1fr9bl3qdpd787pv0qb7a5
limit_rate:0
remote_addr:127.0.0.1
remote_port:43180
request_method:GET
request_filename:/home/wwwroot/default/wounion/dragonfly/public/test/hello
request_uri:/test/hello?name=zhangsan&age=15
scheme:http
server_protocol:HTTP/1.1
server_addr:127.0.0.1
server_name:jiqing.wounion.com
server_port:80
uri:/test/hello
http_referer:
const path = require("path"); const productionGzipExtensions = ["js", "css"]; const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启压缩 const TerserPlugin = require("terser-webpack-plugin"); // 代码压缩和混淆 module.exports = { configureWebpack: (config) => { const isProduction = process.env.NODE_ENV === "production"; const isMiniProgram = process.env.UNI_PLATFORM?.startsWith("mp-"); // 生产环境 + 小程序 启用增强混淆 if (isProduction && isMiniProgram) { config.optimization = config.optimization || {}; config.optimization.minimizer = [ new TerserPlugin({ terserOptions: { compress: { drop_console: false, // 小程序开发可能需要保留 console,上线时可改为 true drop_debugger: true, // 移除 debugger pure_funcs: ["console.log", "console.debug"], // 移除指定的函数调用(不影响 console.error 和 console.warn) passes: 3, // 多次压缩以获得更好的压缩效果 unsafe: true, // 启用不安全的优化 unsafe_comps: true, // 压缩比较表达式 unsafe_math: true, // 优化数学表达式 unsafe_proto: true, // 优化原型链 unsafe_regexp: true, // 优化正则表达式 dead_code: true, // 移除死代码 unused: true, // 移除未使用的变量 collapse_vars: true, // 内联变量 reduce_vars: true, // 减少变量使用 evaluate: true, // 计算常量表达式 side_effects: false, // 保留副作用(小程序环境需要) }, mangle: { // 混淆变量名和函数名 toplevel: false, // 小程序环境建议设为 false,避免影响全局变量和 uni-app 框架 properties: false, // 小程序环境必须关闭属性混淆,避免影响组件属性绑定 safari10: true, // 兼容 Safari 10 }, format: { comments: false, // 移除所有注释 ascii_only: true, // 转义 Unicode 字符为 ASCII,避免小程序编码问题 beautify: false, // 不美化输出,保持压缩格式 }, keep_classnames: false, // 混淆类名 keep_fnames: false, // 混淆函数名 ecma: 2015, // 指定 ECMAScript 版本,兼容小程序环境 }, extractComments: false, // 不提取注释到单独文件 parallel: true, // 使用多进程并行运行,加快构建速度 minify: TerserPlugin.terserMinify, // 使用 terser 压缩 }), ]; } // 添加 Gzip 压缩插件 config.plugins = config.plugins || []; config.plugins.push( new CompressionWebpackPlugin({ // 生成的压缩文件名格式,保留原路径和查询参数,例如 app.js → app.js.gz filename: "[path].gz[query]", //使用 gzip 压缩算法 algorithm: "gzip", // 正则匹配需要压缩的文件,匹配 .js 和 .css test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), // 只压缩大于 100KB(102400 字节)的文件 threshold: 102400, // 压缩后体积小于原体积 80% 才生成压缩文件 minRatio: 0.8, // 保留原始文件,不删除 deleteOriginalAssets: false, //是否删除源文件 }) ); return config; }, };
最新发布
11-07
<think>我们正在分析用户提供的Webpack配置代码片段,该配置涉及TerserPlugin和CompressionWebpackPlugin的使用。代码来自vue.config.js文件,目的是在生产环境下进行代码压缩和gzip压缩。 配置代码分析: 1. 使用TerserPlugin进行JavaScript代码压缩。 2. 使用CompressionWebpackPlugin进行gzip压缩,生成.gz文件。 具体代码: ```javascript module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 添加TerserPlugin插件 config.plugins.push(new TerserPlugin()) // 添加gzip压缩插件 config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 10240, // 文件大小超过10KB才压缩 minRatio: 0.8 // 压缩率小于0.8才压缩 })) } // 取消console打印(被注释掉了) // config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true } } ``` 功能解释: 1. TerserPlugin:用于压缩JavaScript代码,移除空格、注释、缩短变量名等,从而减小文件体积,加快加载速度。Webpack4以上默认使用TerserPlugin(替代了之前的uglifyjs-webpack-plugin),因为它对ES6+的代码压缩支持更好。 2. CompressionWebpackPlugin:生成gzip压缩文件。当服务器配置了gzip压缩时,可以发送.gz文件给支持gzip的浏览器,从而减少传输体积,提高加载速度。配置项说明: - algorithm: 使用gzip压缩算法 - test: 通过正则表达式匹配要压缩的文件(例如.js、.css等) - threshold: 只有文件大小超过这个值(单位:字节)才会被压缩 - minRatio: 压缩比(压缩后大小/原始大小)小于这个值才会被压缩(0.8表示压缩后体积必须小于原始体积的80%) 优化建议: 1. 开启多进程压缩:TerserPlugin支持多进程压缩,可以加快构建速度。配置示例: ```javascript new TerserPlugin({ parallel: true, // 使用多进程,默认并发数为os.cpus().length-1 terserOptions: { // 其他terser选项 } }) ``` 2. 配置更精细的压缩选项:例如,移除console.log语句可以进一步减小代码体积。在上面的注释中已经有一行,取消注释即可启用。也可以这样配置: ```javascript new TerserPlugin({ terserOptions: { compress: { drop_console: true // 移除console } } }) ``` 3. 调整gzip压缩的配置:根据项目实际情况调整threshold和minRatio。如果项目中有很多小文件,可以适当降低threshold,但注意压缩小文件可能收益不大。 潜在问题: 1. 构建时间增加:使用TerserPlugin进行代码压缩和CompressionWebpackPlugin生成gzip文件都会增加构建时间。开启多进程压缩可以缓解,但多进程本身也有开销。 2. 服务器支持:生成的gzip文件需要服务器配置支持。例如,Nginx需要配置gzip_static on;(前提是服务器上存在同名的.gz文件)或者动态gzip压缩。 3. 文件覆盖范围:gzip压缩默认只压缩特定扩展名的文件(如js、css、json等),需要确保所有需要压缩的文件类型都包含在正则表达式中。 总结:该配置是生产环境优化的一部分,通过压缩代码和提供gzip压缩文件来提升应用性能。但要注意构建时间的增加和服务器的配置。 相关问题: 1. 如何配置Webpack以移除console.log语句? 2. 如何优化TerserPlugin的压缩速度? 3. 如何验证gzip压缩是否生效? 4. 除了gzip,还有哪些压缩算法可以用于Webpack打包? </think>以下是对 Webpack 配置代码的分析及优化建议,该配置主要涉及 `TerserPlugin` 和 `CompressionWebpackPlugin` 的使用: ### 一、配置功能解析 1. **TerserPlugin 代码压缩** - 作用:通过移除空格、注释、缩短变量名等方式压缩 JavaScript 代码 - 优势:相比 uglifyjs-webpack-plugin,对 ES6+ 语法支持更好 [^1] ```javascript config.plugins.push(new TerserPlugin()) ``` 2. **CompressionWebpackPlugin Gzip 压缩** ```javascript config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', // 使用gzip算法 test: /\.(js|css|html|json|ico|svg)$/, // 匹配文件类型 threshold: 10240, // 仅处理>10KB文件 minRatio: 0.8 // 压缩率<0.8才生成压缩文件 })) ``` - 生成 `.gz` 文件,配合服务器配置可提升加载速度 - `threshold` 避免压缩小文件(收益低) - `minRatio` 确保有效压缩(0.8=压缩后体积≤原文件80%) 3. **移除 console 语句(注释状态)** ```javascript // config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true ``` - 取消注释后可移除所有 `console.*` 调用,减少生产环境代码体积 --- ### 二、优化建议 1. **TerserPlugin 增强配置** 开启并行压缩加速构建: ```javascript new TerserPlugin({ parallel: true, // 启用多进程(默认CPU核心数-1) terserOptions: { compress: { drop_console: true // 建议在此启用移除console } } }) ``` 2. **Gzip 扩展配置** - 增加文件类型覆盖: ```javascript productionGzipExtensions: ['js', 'css', 'html', 'svg', 'json'] ``` - 添加缓存提升二次构建速度: ```javascript cache: true // 启用文件缓存 ``` 3. **Brotli 压缩替代方案** 更高效的压缩算法(需服务器支持): ```javascript new CompressionWebpackPlugin({ algorithm: 'brotliCompress', filename: '[path][base].br', compressionOptions: { level: 11 }, }) ``` --- ### 三、潜在问题 1. **构建性能损耗** - 压缩操作使构建时间增加约 15-30%,开启 `parallel` 可缓解 - 解决方案:仅在生产环境启用 [^3] 2. **服务器配置要求** - Gzip 文件需配合服务器配置(如 Nginx) ```nginx gzip_static on; # 优先使用预压缩文件 ``` 3. **版本兼容性风险** - TerserPlugin v4.x 需匹配 Webpack4(如用户使用的 vue-cli 4.x)[^2] - 升级到 Webpack5 需使用 TerserPlugin v5+ --- ### 四、推荐最佳实践 ```javascript // vue.config.js const TerserPlugin = require('terser-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: { optimization: { minimizer: [ new TerserPlugin({ parallel: true, terserOptions: { compress: { drop_console: process.env.NODE_ENV === 'production' } } }) ] }, plugins: [ new CompressionPlugin({ algorithm: 'gzip', threshold: 10240, minRatio: 0.8, test: /\.(js|css|html|svg|json)$/, deleteOriginalAssets: false // 保留源文件 }) ] } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值