## vue.config.js * vue-cli3 * vue2.6.2 ``` const productionGzipExtensionsc = ['js', 'css']; //压缩的文件类型 const compressionWebpackPlugin = require('compression-webpack-plugin'); //引入插件 ``` ![](https://img.kancloud.cn/2c/e3/2ce3da4ddd7ff2bbbc66f5fd4115b544_1102x1358.png) * 注释:configureWebpack:配置webpack相关的属性 * output: build打包输出文件名称 - 参考官网:https://webpack.docschina.org/api/module-methods/ ![](https://img.kancloud.cn/a9/12/a91234c88dee665203b0a04fd7958c83_691x359.png) > 懒加载路由后分组[webpackChunkName一致] - 时间戳:timestamp * webpack-bundle-analyzer:build目录结构分析 * 错误: Building for production... ERROR TypeError: Cannot read property 'tapPromise' of undefined TypeError: Cannot read property 'tapPromise' of undefined > 将版本改为"compression-webpack-plugin": "^5.0.0",重新安装 ## 浏览器 f12 控制台查看是否压缩成功等字段 ![](https://img.kancloud.cn/11/4f/114fbf292bc1cbad3ff2bb1452fe8d68_1009x509.png) * 压缩类型 Content-Encoding * 缓存 Cache-Control ## nginx配置 * 参考地址: [https://www.nginx.cn/doc/standard/httpgzip.html]() * 压缩文件 gzip on; gzip_min_length 1024; gzip_comp_level 6; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; - 注意application/javascript 压缩web的js文件