webpack打包gz文件,nginx开启gzip压缩

wepback配置

webpack4配合"compression-webpack-plugin": "^6.1.2"打包压缩gz

typescript 复制代码
chain.plugin("compression").use(
        new CompressionPlugin({
          test: /\.js$|\.html$|\.css$/,
          threshold: 10240, // 超过10KB的压缩
          deleteOriginalAssets: false,// 保留源文件
        })
      )

上传文件到服务器

nginx配置

typescript 复制代码
location /h5/ {
		gzip on;	// 动态压缩,如果没有gz文件再压缩
		gzip_static on;// 优先返回静态gz文件
		gzip_http_version 1.1;
		gzip_proxied expired no-cache no-store private auth;
		gzip_vary on;
		gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        add_header Cache-Control no-store;
        index  index.html;
        }
相关推荐
用户28907942162711 小时前
Spec-Kit应用指南
前端
酸菜土狗1 小时前
🔥 手写 Vue 自定义指令:实现内容区拖拽调整大小(超实用)
前端
ohyeah1 小时前
深入理解 React Hooks:useState 与 useEffect 的核心原理与最佳实践
前端·react.js
Cache技术分享1 小时前
275. Java Stream API - flatMap 操作:展开一对多的关系,拉平你的流!
前端·后端
apollo_qwe1 小时前
前端缓存深度解析:从基础到进阶的实现方式与实践指南
前端
周星星日记2 小时前
vue中hash模式和history模式的区别
前端·面试
Light602 小时前
Vue 高阶优化术:v-bind 与 v-on 的实战妙用与思维跃迁
前端·低代码·vue3·v-bind·组件封装·v-on·ai辅助开发
周星星日记2 小时前
5.为什么vue中使用query可以保留参数
前端·vue.js
lebornjose2 小时前
javascript - webgl中绑定(bind)缓冲区的逻辑是什么?
前端·webgl
瘦的可以下饭了2 小时前
Day05- CSS 标准流、浮动、Flex布局
前端