vue用webpack打包开启gzip，在服务端tomcat开启配置

最新推荐文章于 2024-08-05 10:53:32 发布

原创最新推荐文章于 2024-08-05 10:53:32 发布 · 1.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中配置gzip压缩，包括修改config/index.js和webpack.prod.conf.js文件，安装compression-webpack-plugin插件，以及在Tomcat部署时启用gzip。通过这些步骤，可以显著减小文件体积，提高加载速度。

1.vue工程中的config/index.js中配置如下
在这里插入图片描述

productionGzip: true,
productionGzipExtensions: ['js', 'css'],

2.修改build/webpack.prod.conf.js配置如下
在这里插入图片描述
3.安装压缩工具，安装指定版本，千万不能按照最新版

npm install --save-dev compression-webpack-plugin@1.1.11

4.执行npm run build 执行结果如下
压缩前
在这里插入图片描述
压缩后

5.如果部署在tomcat需要启用gzip，修改conf/server.xml, 增加后面compression开头的三行配置

<Connector port="9915" protocol="HTTP/1.1"
           maxThreads="200" connectionTimeout="20000"
           enableLookups="false" 
           redirectPort="8443"
           URIEncoding="UTF-8"
           compression="on"
           compressionMinSize="1024"
           compressableMimeType="text/html,text/xml,text/plain,text/javascript,text/csv,application/javascript,application/json,application/xml"
/>