前言：
? ? ? ? 之前一直認(rèn)為都5G時(shí)代了，用戶也不差這點(diǎn)流量，所以一直對(duì)前端項(xiàng)目大小不太關(guān)心。但是當(dāng)我發(fā)現(xiàn)只需要簡單的配置一下，整個(gè)包體積就能縮小6倍的時(shí)候，我覺得這個(gè)投入是很有必要的！
體積分析：
? ? ? ? ? ?很開心的是vue-cli3可以通過? vue-cli-service build --report 的命令在 dist 文件夾下生成 report.html?查看官方文檔
如果提示vue-cli-service 不是內(nèi)部命令，可以先安裝一下： npm install?@vue/cli-service -g
當(dāng)然運(yùn)行的時(shí)候如果報(bào)錯(cuò)缺啥就安裝啥，以下是我遇到過的：
npm i @vue/cli-plugin-babel -g
npm i @vue/cli-plugin-eslint -g
npm i vue-template-compiler -g
然后接下來我們就在項(xiàng)目中配置并且執(zhí)行命令看一看：
1.? 在 package.json 文件中新增一條命令?"analy": "vue-cli-service build --report"
2. 這樣我們執(zhí)行 npm run?analy 的時(shí)候就會(huì)在 dist目錄下生成 report.html 文件
可以看到這里提示我們程序大小為2.9MB，然后我們打開 report.html
這里就可以看到具體那個(gè)模塊占用空間比較多，可以定點(diǎn)優(yōu)化。
當(dāng)然我們這里就不多做分析，統(tǒng)一使用gzip壓縮處理一下就滿足了。
Gzip的使用：
? ? ? ? 一、配置：
? ? ? ? ? ? ? ? 1.? 安裝依賴包： npm install --save-dev compression-webpack-plugin
? ? ? ? ? ? ? ? 2.? 在vue.config.js 文件中引入：?const CompressionPlugin = require('compression-webpack-plugin')?
? ? ? ? ? ? ? ? 3.? 配置以下內(nèi)容：
configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { plugins: [ new CompressionPlugin({ test: /\.js$|\.html$|\css/, // 匹配文件名 threshold: 10240, // 對(duì)超過10k的文件進(jìn)行壓縮 deleteOriginalAssets: true // 是否刪除原文件 }) ] } } },? ? ? ? ? ? ??
? ? ? ? ?二、打包：
? ? ? ? ? ? ? ? ? ? ?配置完成之后執(zhí)行 npm run build 就可以直接看到效果，現(xiàn)在我們執(zhí)行 npm run analy再來看一下打包后的體積
可以看到這里項(xiàng)目體積從近3m 減小到了不到 500k，縮小了6倍，就這么幾句代碼，投入產(chǎn)出比是相當(dāng)?shù)母甙。?/p>
