删除vue打包大小限制_如何优化 Vue 祖传代码
目錄
- 前言
- 為什么要優(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ì)于這幾個(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-pluginwebpack.config.js 使用
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); plugins: [new OptimizeCSSPlugin() ]js 代碼壓縮 (uglifyjs-webpack-plugin)
下載
npm install optimize-css-assets-webpack-pluginwebpack.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-pluginwebpack.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)題。
- 上一篇: php 递归实现无限极分类和排序_Lar
- 下一篇: vue 数字变星号 过滤器_Vue自定义