目錄

• 前言
• 為什么要優(yōu)化
• 從哪里開(kāi)始下手
• 現(xiàn)在開(kāi)始
• 1.代碼壓縮
• 2.刪除一些廢棄的頁(yè)面
• 3.使用 cdn 優(yōu)化
• 4.修改路由引入方式
• 結(jié)果

前言

“這頁(yè)面加載也太慢了！”，一個(gè)寧?kù)o的下午就此打破，在老板和 PM 的 威逼利誘之下 ，我開(kāi)始了對(duì)這個(gè)祖?zhèn)?shi)山項(xiàng)目進(jìn)行了優(yōu)化，因?yàn)檫@個(gè)項(xiàng)目傳到我手上至少經(jīng)過(guò)了4-5代前端了，很多東西也不敢隨意刪，找不到負(fù)責(zé)人。

為什么要優(yōu)化？

我們主要看首屏加載速度，在測(cè)試環(huán)境我們項(xiàng)目其實(shí)跑得還是蠻快，但是生產(chǎn)環(huán)境是用印尼比較差的服務(wù)器，再加上需要 kexue 上網(wǎng)（總是網(wǎng)絡(luò)出現(xiàn)波動(dòng)），在這次 UI 2.0 上線之后，堆積的東西終于越來(lái)越多，項(xiàng)目也越來(lái)越龐大。毫不夸張的說(shuō)我們現(xiàn)在使用 4G 首次打開(kāi)頁(yè)面的速度大概在 16 秒以上，根據(jù)下面的表格推斷出客戶流失率，可是在印尼還在用著 3G 網(wǎng)絡(luò)，可想而知這流失率太恐怖了。并且這是一個(gè) C 端產(chǎn)品，所以要更加考慮用戶體驗(yàn)了

客戶等待頁(yè)面時(shí)長(zhǎng)的流失率

作為一個(gè)開(kāi)發(fā)者，你對(duì)首頁(yè)打開(kāi)速度又有多高的要求呢？

從哪里開(kāi)始下手

在觀察了這個(gè)項(xiàng)目架構(gòu)之后呢，我推斷出以下幾個(gè)可行方案

對(duì)于代碼打包進(jìn)行壓縮

廢除以前不該用到的組件及頁(yè)面

使用 CDN 引入部分資源

優(yōu)化路由，修改引入方式

對(duì)于這幾個(gè)優(yōu)化方案，也是試了一遍又一遍。確實(shí)是效果挺大的才發(fā)出來(lái)給大家圍觀一下

現(xiàn)在開(kāi)始

記住這張圖中三個(gè)比較大的文件 size, 我們每進(jìn)行一步方案就看看效果

1.代碼壓縮

代碼壓縮是一個(gè)很不錯(cuò)選擇，我們首先需要下載一些依賴

css 代碼壓縮 (optimize-css-assets-webpack-plugin)

下載

npm install optimize-css-assets-webpack-plugin

webpack.config.js 使用

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); plugins: [new OptimizeCSSPlugin() ]

js 代碼壓縮 (uglifyjs-webpack-plugin)

下載

npm install optimize-css-assets-webpack-plugin

webpack.config.js 使用

const UglifyJsPlugin = require('uglifyjs-webpack-plugin') plugins:[new UglifyJsPlugin({cache: true, // 開(kāi)啟緩存parallel: true, // 開(kāi)啟多線程編譯sourceMap: true, // 是否sourceMapuglifyOptions: { // 丑化參數(shù)comments: false,warnings: false,compress: {unused: true,dead_code: true,collapse_vars: true,reduce_vars: true},output: {comments: false}}}), ]

開(kāi)啟gzip

安裝

npm install compression-webpack-plugin

webpack.config.js 使用

const CompressionWebpackPlugin = require('compression-webpack-plugin') plugins:[new CompressionWebpackPlugin({asset: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('.(' +['js', 'css'].join('|') +')$'),threshold: 10240,minRatio: 0.8}) ]

nginx 配置

gzip on; gzip_static on; gzip_min_length 1k; gzip_buffers 4 32k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain application/x-javascript text/css application/xml; gzip_vary on; gzip_disable "MSIE [1-6].";

先看看效果

我們?cè)诘谝徊骄筒畈欢鄿p少了 1/2 的大小

接著往下看

2.刪除一些廢棄的頁(yè)面

這個(gè)項(xiàng)目因?yàn)橹笆且恢钡^(guò)來(lái)的，在前面也有講到，但是我還是下定決心刪除它們，在截取了一系列屏之后，我找到了老員工 與 PM 來(lái)確認(rèn)頁(yè)面是否已經(jīng)廢棄，這個(gè)環(huán)境比較費(fèi)時(shí)間，這下面的表格就是一個(gè)個(gè)確認(rèn)出來(lái)的

在刪除這些路由之后我重新進(jìn)行了打包，請(qǐng)看下面，還是有點(diǎn)效果的嘛，但這并沒(méi)有達(dá)到我的預(yù)期效果

3. 使用cdn開(kāi)始性能優(yōu)化

我們當(dāng)前使用了 mint ui 庫(kù)，vue 全家桶 一系列玩意，我們找到對(duì)應(yīng)的 cdn 在index.html中引入

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.cjs.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/mint-ui/2.2.9/actionsheet/index.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.common.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-i18n/8.22.1/vue-i18n.common.js"></script>

引入完之后呢？將不需要打包的資源進(jìn)行相應(yīng)的配置，所以我們需要在 webpack.config.js 中寫(xiě)上

externals:{'vue':'Vue','mint-ui':'MINT','axios':'axios','vue-router':'VueRouter','vue-i18n':'VueI18n', },

這樣就可以用來(lái)忽略這些資源了

4.修改路由引入方式

老嚴(yán)將頁(yè)面的組件（去除之前刪除的頁(yè)面）數(shù)了一下是 73個(gè)，一般使用 import 引入的寫(xiě)法，當(dāng)項(xiàng)目打包時(shí)路由里的所有 component 都會(huì)打包在一個(gè)js中，在項(xiàng)目剛進(jìn)入首頁(yè)的時(shí)候，就會(huì)加載所有的組件，所以導(dǎo)致首頁(yè)加載較慢

import 引入

import DetailActivityStatic from '@/components/discover/share/DetailActivityStatic'export default [{path: "/discover/DetailActivityStatic",component: DetailActivityStatic} ]

現(xiàn)在老嚴(yán)全部改為 使用 require

export default [{path: "/discover/DetailActivityStatic",component: resolve => require(['@/components/discover/share/DetailActivityStatic'], resolve)} ]

這個(gè)環(huán)節(jié)也有點(diǎn)累，因?yàn)轫?yè)面實(shí)在太多了，下面是打包后的效果

我們驚奇的發(fā)現(xiàn) js確實(shí)小了挺多，那么這些這些內(nèi)容去哪了？我們也沒(méi)有刪除啊

在js文件夾中，我們發(fā)現(xiàn)了好多個(gè)單個(gè)js，這是為什么呢？

因?yàn)橛?require 會(huì)將 component 分別打包成不同的js，按需加載，訪問(wèn)此路由時(shí)才會(huì)加載這個(gè)js，所以就避免進(jìn)入首頁(yè)時(shí)加載內(nèi)容過(guò)多。

所噶，到此為止我們優(yōu)化做完了。我們來(lái)看看效果吧!

結(jié)果

來(lái)看看效果吧！

有些仔細(xì)的朋友會(huì)發(fā)現(xiàn)，這個(gè)app.js 與 vendor.js 怎么會(huì)變得比剛剛還小呢？

因?yàn)槲覀兊玫谝徊綁嚎s代碼里面做了 gzip 壓縮

現(xiàn)在首屏打開(kāi)基本上控制在 1-3s 左右浮動(dòng)了

相比之前的 16s 簡(jiǎn)直不要強(qiáng)太多，PM 與 老板 直呼 “這也太快了！啊啊啊~”

總結(jié)

以上是生活随笔為你收集整理的删除vue打包大小限制_如何优化 Vue 祖传代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。