[Vue] vue项目体积初步分析与优化 —— 几句代码就能缩小

前言：

        之前一直认为都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倍，就这么几句代码，投入产出比是相当的高啊！