前言：
之前一直认为都5G时代了，用户也不差这点流量，所以一直对前端项目大小不太关心。但是当我发现只需要简单的配置一下，整个包体积就能缩小6倍的时候，我觉得这个投入是很有必要的！
体积分析：
很开心的是vue-cli3可以通过 vue-cli-service build --report 的命令在 dist 文件夹下生成 report.html 查看官方文档
如果提示vue-cli-service 不是内部命令，可以先安装一下： npm install @vue/cli-service -g
当然运行的时候如果报错缺啥就安装啥，以下是我遇到过的：
npm i @vue/cli-plugin-babel -g
npm i @vue/cli-plugin-eslint -g
npm i vue-template-compiler -g
build --report
然后接下来我们就在项目中配置并且执行命令看一看：
1. 在 package.json 文件中新增一条命令 "analy": "vue-cli-service build --report"
2. 这样我们执行 npm run analy 的时候就会在 dist目录下生成 report.html 文件
运行分析
可以看到这里提示我们程序大小为2.9MB，然后我们打开 report.html
report.html
这里就可以看到具体那个模块占用空间比较多，可以定点优化。
当然我们这里就不多做分析，统一使用gzip压缩处理一下就满足了。
Gzip的使用：
一、配置：
1. 安装依赖包： npm install --save-dev compression-webpack-plugin
2. 在vue.config.js 文件中引入： const CompressionPlugin = require('compression-webpack-plugin')
3. 配置以下内容：
configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { plugins: [ new CompressionPlugin({ test: /\.js$|\.html$|\css/, // 匹配文件名 threshold: 10240, // 对超过10k的文件进行压缩 deleteOriginalAssets: true // 是否删除原文件 }) ] } } },
gzip配置
二、打包：
配置完成之后执行 npm run build 就可以直接看到效果，现在我们执行 npm run analy再来看一下打包后的体积
gzip打包后的体积
可以看到这里项目体积从近3m 减小到了不到 500k，缩小了6倍，就这么几句代码，投入产出比是相当的高啊！
