关于利用 Nginx 开启静态网站 Gzip 压缩的教程已经有很多了，但是彷佛没几个讲怎么在工具存储的静态网站中开启 Gzip 压缩。实在也不繁芜，我们一起来看下~
1. 打包项目1.1 先安装 compression-webpack-plugin 插件：npm install compression-webpack-plugin --save-dev
1.2 在 vue.config.js 中开启压缩插件(项眼前没有此文件可以在根目录下创建):
const CompressionWebpackPlugin = require('compression-webpack-plugin');module.exports = defineConfig({ transpileDependencies: true, configureWebpack: config => { config.externals = {} if (process.env.NODE_ENV === 'production') { return { plugins: [new CompressionWebpackPlugin({ test: /\.js$|\.html$|\.css/, // 压缩文件的后缀 threshold: 1024, // 对超过 1k 的文件进行压缩 deleteOriginalAssets: true, // 不须要保留压缩前文件 })] } } }})
1.3 运行 npm run build 打包项目，打包后打开打包产物目录，可以看到文件后缀有 .gz
2. 开启静态网站托管并上传网站2.1 创建桶并开启静态网站托管
进入工具存储掌握台，点击右上角创建桶。
这里桶名须要把稳下，全局唯一，不能与其他人的重复，桶策略选择公共读
把稳：开启公共读后，任何人均能访问你桶内的数据！
！
强烈建议这个桶仅用作静态网站托管，不要存放隐私数据
把稳：开启公共读后，任何人均能访问你桶内的数据！
！
强烈建议这个桶仅用作静态网站托管，不要存放隐私数据
把稳：开启公共读后，任何人均能访问你桶内的数据！
！
强烈建议这个桶仅用作静态网站托管，不要存放隐私数据
创建后点击桶名，进入桶配置，点击静态网站托管，配置静态网站
此处示例项目比较大略，默认首页和默认 404 页面均填写 index.html，不须要配置重定向规则
这个网址即是网站地址
此时点击打开会提示 404，由于我们还没有上传网站文件，接下来会上传网站文件并配置 Gzip 压缩。
2.1.2 配置域名解析
在配置静态网站时，可以看到有提示从 22 年 3 月开始 OBS 禁止通过默认域名（桶访问域名或静态网站访问域名）利用静态网站托管功能。如果是新创建的桶，必须要配置桶域名才能访问。
点击左侧域名管理，点击绑定用户域名
设置完成后，须要去自己的域名供应商处将域名 CNAME 指向 OBS 桶域名，等待一下子解析生效。
2.2 上传静态网站并配置 Gzip 压缩这里先讲两个缺点步骤和缺点的缘故原由缘故原由，太长不看可跳转 # 2.2.2 精确方案 ，更推举直接参考 # 3 更进一步--自动设置元数据
2.2.1 试错手动方案由于工具存储的工具名强唯一的，即并不会自动把 xxx.js 指向 xxx.js.gz，此时如果直接把 dist 目录下文件上传到工具存储并开启静态网站托管，会创造浏览器找不到 .gz 文件，会报错 404，页面一片空缺。
手动版办理方法非常粗暴，直接上传前把文件名后缀 .gz 去掉再上传就行，这里须要记下来都改了哪些文件的后缀，一下子要用到。
去除后缀后，要求没报错 404 了，但是页面还是一片空缺，这又是为啥？
缘故原由是浏览器是根据做事器发来的要求头来判断收到的文件到底是什么类型，再决定该如何处理，如果内容被压缩了，就必须要显示的见告浏览须要解压后才能利用。Nginx 配置后，会自动给相应加上解释奉告浏览器，但是工具存储不会主动奉告，须要我们处理。
手动处理方法也很粗暴，挨个去设置元数据添加 Content-Encoding: gzip，此处利用 OBS Browser+ 工具，浏览器操作类似。
2.2.2 精确方案手动将所有工具的 .gz 后缀去掉挨个去给去过后缀的工具添加元数据：Content-Encoding: gzip3. 更进一步 —— 自动设置元数据
本文用的示例项目比较大略，只有三个文件须要改，手工改还不麻烦，但是对与繁芜项目可能要几十上百个文件，处理起来就非常麻烦，程序员的思路便是能代码办理就不要动手，这里我们利用 数据工坊 DWR 做事自动改文件名 + 改后缀。这里的先容比较大略，如果想利用 DWR 进行更为繁芜的操作，可以参考这篇博文工具存储只能按文件名搜索？ 用 DWR + ElasticSearch 实现文件名、文件内容、图片笔墨的模糊搜索！
-云社区-华为云
首先进入 FunctionGraph 做事，创建一个修正文件名和元数据的 Serverless 函数。记得切换下 region，选择目标 OBS 桶所在 Region。
函数内容为
# -- coding:utf-8 --from urllib.parse import unquote_plusfrom obs import ObsClient, SetObjectMetadataHeaderdef handler(event, context): # 获取桶名与工具名 region_id, bucket_name, object_name = get_obs_obj_info(event.get("Records", None)[0]) context.getLogger().info(f"bucket name: {bucket_name}, object key: {object_name}") ak = context.getAccessKey() sk = context.getSecretKey() server = 'obs.' + region_id + '.myhuaweicloud.com' obs_client = ObsClient(access_key_id=ak, secret_access_key=sk, server=server) # 获取工具 object_content = obs_client.getObject(bucket_name, object_name, loadStreamInMemory=False) # 去掉 .gz 后缀 new_object_name = object_name[:-3] # 重新上传 resp = obs_client.putObject(bucket_name, new_object_name, content=object_content.body.response) # 设置元数据 headers = SetObjectMetadataHeader(contentEncoding="gzip") obs_client.setObjectMetadata(bucket_name, new_object_name, headers=headers) context.getLogger().info("Upload Success") returndef get_obs_obj_info(record): if 's3' in record: s3 = record['s3'] return record["eventRegion"], s3['bucket']['name'], unquote_plus(s3['object']['key']) else: obs_info = record['obs'] return record["eventRegion"], obs_info['bucket']['name'], \ unquote_plus(obs_info['object']['key'])
添加 OBS SDK 依赖包
3.2 创建事情流
进入 DWR 做事掌握台，点击创建事情流
在左侧算子目录找到自定义，拖到中间添加连接线并在右侧选择函数，点击保存
保存后会进入到事情流管理，点击创建触发器
桶名选择静态网站托管的桶，事宜源类型为 ObjectCreated，即任何上传行为均会触发，后缀填写 .gz，即只有压缩类型的文件才会触发。
3.3 上传文件
重新在 Vue 项目根目录运行 npm run build 打包项目，这次不须要再去手动改后缀了，直接把打包后结果全体拖入到上传框点击上传
4. 验证已开启 Gzip 压缩
配置完成后，再次访问静态网站地址，创造已经成功，剖析要求相应内容也都是压缩后的
点击下方，第一韶光理解华为云新鲜技能~
华为云博客_大数据博客_AI博客_云打算博客_开拓者中央-华为云
