webpack 图片压缩不起作用_vue打包时gzip压缩的两种方案

开局一张图：

可以看出，在项目部署后，我们的资源文件请求都会保持原本大小，如果文件过大，并且很多的情况下，会导致网络请求耗时，严重点可能阻塞后面的进程。

所以，此篇介绍两种gzip压缩的方式：

1、打包的时候通过webpack配置生成对应的 .gz 文件，浏览器请求xx.js/css等文件时，服务器返回对应的xxx.js.gz文件；

2、浏览器请求xx.js文件时，服务器对xx.js文件进行gzip压缩后传输给浏览器。

01webpack打包生成gz文件        

安装插件(compression-webpack-plugin)：

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

vue.config.js文件进行webpack配置(没有此文件可以在项目根路径创建一个文件)：

const CompressionPlugin = require('compression-webpack-plugin');module.exports = {
            plugins: [            new Com