Vue首屏優(yōu)化方案小結(jié)
在Vue項目中，引入到工程中的所有js、css文件，編譯時都會被打包進(jìn)vendor.js，瀏覽器在加載該文件之后才能開始顯示首屏。若是引入的庫眾多，那么vendor.js文件體積將會相當(dāng)?shù)拇?，影響首屏的體驗?？梢钥磦€例子：
這是優(yōu)化前的頁面加載狀態(tài)：執(zhí)行 npm run build 打包項目，出來的vendeor.js文件，基本都是1M以上的的巨大文件，沒有用戶能忍受5s以上的loading而不關(guān)閉頁面的，如圖所示：
當(dāng)項目在掛載到服務(wù)器上，平均都是10S+以上加載出來，好家伙這加載時間，仿佛過了半個世紀(jì)，很煩人，心態(tài)boom, 開發(fā)者甚至都有種想砸電腦的沖動
一、分析下前端加載速度慢原因
第一步：首先安裝webpack的可視化資源分析工具，命令行執(zhí)行：
npm i webpack-bundle-analyzer -D
第二步：然后在webpack的dev開發(fā)模式配置中，引入插件，代碼如下：
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
plugins: [
new BundleAnalyzerPlugin()
]第三步：最后命令行執(zhí)行 npm run build --report , 瀏覽器會自動打開分析結(jié)果，如下所示：
可以看到vue全家桶相關(guān)依賴占用了很大的空間，對webpack的構(gòu)建速度和網(wǎng)站加載速度都會有比較大的影響。單頁應(yīng)用會隨著項目越大，導(dǎo)致首屏加載速度很慢，針對目前所暴露出來的問題，有以下幾種優(yōu)化方案可以參考：
二、優(yōu)化方案
0.初步優(yōu)化
初步優(yōu)化,減少全局組件引入（是否放在main.js），按需引入需要的模塊(echarts按需引入等)，使用輕量級數(shù)據(jù)庫（moment.js 切換 data-fns等）
1.采用異步組件和懶加載的方式
異步組件：
這樣做的目的是在首屏渲染時減少加載文件的數(shù)量，在需要用到一些組件時才會從服務(wù)器獲取，而且不會重復(fù)請求，可以有效的減少白屏的時間。
路由懶加載：
訪問到當(dāng)前頁面才會加載相關(guān)的資源，異步方式分模塊加載文件，默認(rèn)的文件名是隨機的id。如果在output中配置了chunkFilename，可以在component中添加WebpackChunkName，是為了方便調(diào)試，在頁面加載時候，會顯示加載的對應(yīng)文件名+hash值，如下圖：
{
path: '/Login',
name: 'Login',
component: () = >import( /* webpackChunkName: "Login" */ '@/view/Login')
}
圖片懶加載：使用vue-lazyload插件
Vue 圖片懶加載 之 Vue-Lazyload-CSDN博客
//引入vue懶加載
import VueLazyload from 'vue-lazyload'
//方法一： 沒有頁面加載中的圖片和頁面圖片加載錯誤的圖片顯示
// Vue.use(VueLazyload)
//方法二： 顯示頁面圖片加載中的圖片和頁面圖片加載錯誤的圖片
//引入圖片
import loading from '@/assets/images/load.jpg'
//注冊圖片懶加載
Vue.use(VueLazyload, {
// preLoad: 1.3,
error: '@/assets/images/error.jpg',//圖片錯誤的替換圖片路徑(可以使用變量存儲)
loading: loading,//正在加載的圖片路徑(可以使用變量存儲)
// attempt: 1
})使用：
<div class="lazyLoad">
<ul>
<li v-for="img in arr">
<img v-lazy="img.thumbnail_pic_s">
</li>
</ul>
</div>2.webpack開啟gzip壓縮文件傳輸模式
gizp壓縮是一種http請求優(yōu)化方式，通過減少文件體積來提高加載速度。html、js、css文件甚至json數(shù)據(jù)都可以用它壓縮，可以減小60%以上的體積。
前端配置gzip壓縮，并且服務(wù)端使用nginx開啟gzip，用來減小網(wǎng)絡(luò)傳輸?shù)牧髁看笮 ?/strong>
webpack打包時借助 compression webpack plugin實現(xiàn)gzip壓縮，安裝插件如下：
npm i compression-webpack-plugin 或 npm install compression-webpack-plugin@6.1.1 --save-dev
在vue-cli 3.0 中，vue.config.js配置如下：
const CompressionPlugin = require('compression-webpack-plugin');//引入gzip壓縮插件
module.exports = {
plugins:[
new CompressionPlugin({//gzip壓縮配置
filename: '[path][base].gz',
algorithm: 'gzip', // 壓縮算法，官方默認(rèn)壓縮算法是gzip
test:/\.js$|\.css$|\.html$|\.eot$|\.woff$/,// 使用gzip壓縮的文件類型
threshold:10240,//對超過10kb的數(shù)據(jù)進(jìn)行壓縮，默認(rèn)是10240
deleteOriginalAssets:false,//是否刪除原文件
minRatio: 0.8, // 最小壓縮比率，默認(rèn)是0.8
})
]
}啟用gzip壓縮打包之后，會變成下面這樣，自動生成gz包。目前大部分主流瀏覽器客戶端都是支持gzip的，就算小部分非主流瀏覽器不支持也不用擔(dān)心，不支持gzip格式文件的會默認(rèn)訪問源文件的，所以不要配置清除源文件。
在nginx中開啟gzip：
server{
//開啟和關(guān)閉gzip模式
gzip on;
//gizp壓縮起點，文件大于2k才進(jìn)行壓縮;設(shè)置允許壓縮的頁面最小字節(jié)數(shù)，頁面字節(jié)數(shù)從header頭得content-length中進(jìn)行獲取。 默認(rèn)值是0，不管頁面多大都壓縮。建議設(shè)置成大于2k的字節(jié)數(shù)，小于2k可能會越壓越大。
gzip_min_length 2k;
// 設(shè)置壓縮所需要的緩沖區(qū)大小，以4k為單位，如果文件為7k則申請2*4k的緩沖區(qū)
gzip_buffers 4 16k;
// 設(shè)置gzip壓縮針對的HTTP協(xié)議版本
gzip_http_version 1.0;
// gzip 壓縮級別，1-9，數(shù)字越大壓縮的越好，也越占用CPU時間
gzip_comp_level 2;
//進(jìn)行壓縮的文件類型
gzip_types text/plain application/javascript text/css application/xml;
// 是否在http header中添加Vary: Accept-Encoding，建議開啟
gzip_vary on;
}配置好之后，打開瀏覽器訪問線上，F(xiàn)12查看控制臺，如果該文件資源的響應(yīng)頭里顯示有Content-Encoding: gzip，表示瀏覽器支持并且啟用了Gzip壓縮的資源
3.Webpack 代碼分割與優(yōu)化
模塊拆分： 配置Webpack將代碼拆分成多個小塊，利用Tree Shaking、代碼壓縮等技術(shù)減少代碼體積。這將減少初始加載所需的下載時間，提高頁面加載速度。
// vue.config.js
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
};4.依賴模塊采用第三方cdn資源（對于第三方j(luò)s庫的優(yōu)化，分離打包）
生產(chǎn)環(huán)境是內(nèi)網(wǎng)的話，就把資源放內(nèi)網(wǎng)，通過靜態(tài)文件引入，會比node_modules和外網(wǎng)CDN的打包加載快很多。如果有外網(wǎng)的話，可以通過CDN方式引入，因為不用占用訪問外網(wǎng)的帶寬，不僅可以為您節(jié)省流量，還能通過CDN加速，獲得更快的訪問速度。但是要注意下，如果你引用的CDN 資源存在于第三方服務(wù)器，在安全性上并不完全可控。國內(nèi)的CDN服務(wù)推薦使用 BootCDN
目前采用引入依賴包生產(chǎn)環(huán)境的js文件方式加載，直接通過window可以訪問暴露出的全局變量，不必通過import引入，Vue.use去注冊
在webpack的dev開發(fā)配置文件中, 加入如下參數(shù)，可以分離打包第三方資源包，key為依賴包名稱，value是源碼拋出來的全局變量。對于一些其他的工具庫，盡量采用按需引入的方式。
使用 CDN 的好處有以下幾個方面
（1）加快打包速度。分離公共庫以后，每次重新打包就不會再把這些打包進(jìn) vendors 文件中。
（2）CDN減輕自己服務(wù)器的訪問壓力，并且能實現(xiàn)資源的并行下載。瀏覽器對 src 資源的加載是并行的(執(zhí)行是按照順序的)。
第一步：修改vue.config.js
module.exports = {
...
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios',
'element-ui': 'ELEMENT',
'underscore' : {
commonjs: 'underscore',
amd: 'underscore',
root: '_'
},
'jquery': {
commonjs: 'jQuery',
amd: 'jQuery',
root: '$'
}
}
...
}如果想引用一個庫，但是又不想讓webpack打包，且又不影響我們在程序中以CMD、AMD或者window/global全局等方式進(jìn)行使用，那就可以通過配置externals
第二步：在index.html中添加cdn
<link rel="external nofollow" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.4/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.7.2/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore-min.js"></script>
</body>第三步：去除vue.use相關(guān)代碼
通過 CDN 引入，在使用 VueRouter Vuex ElementUI 的時候要改下寫法。CDN會把它們掛載到window上，可以不再使用Vue.use(xxx)
main.js中 注釋掉
// import Vue from 'vue'; // import iView from 'iview'; // import '../theme/index.less';
5.禁止生成map文件
在vue.config.js配置：
module.exports = {
productionSourceMap: false, // 生產(chǎn)環(huán)境是否生成 sourceMap 文件，一般情況不建議打開
}在設(shè)置了productionSourceMap: false之后，就不會生成map文件，map文件的作用在于：項目打包后，代碼都是經(jīng)過壓縮加密的，如果運行時報錯，輸出的錯誤信息無法準(zhǔn)確得知是哪里的代碼報錯。也就是說map文件相當(dāng)于是查看源碼的一個東西。如果不需要定位問題，并且不想被看到源碼，就把productionSourceMap 置為false，既可以減少包大小，也可以加密源碼。
6.去掉代碼中的console和debugger
打包之后控制臺很干凈，部署正式環(huán)境之前最好這樣做。vue-cli3.0
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
}
},uglifyOptions去除console來減少文件大小
// 安裝uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev
// 修改vue.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
//打包環(huán)境去掉console.log
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true, //注釋console
drop_debugger: true, //注釋debugger
pure_funcs: ['console.log'], //移除console.log
},
},
}),
],
}
}
}
}7. 預(yù)渲染配置
使用插件：prerender-spa-plugin
vue.config.js中配置如下：
const PrerenderSpaPlugin = require('prerender-spa-plugin');
const Render = PrerenderSpaPlugin.PuppeteerRenderer;
const path = require('path');
configureWebpack: () => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路徑，也可以與webpakc打包的一致。
// 下面這句話非常重要?。?！
// 這個目錄只能有一級，如果目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預(yù)渲染的時候只會卡著不動。
staticDir: path.join(__dirname, 'dist'),
// 對應(yīng)自己的路由文件，比如a有參數(shù)，就需要寫成 /a/param1。
routes: ['/', '/Login', '/Home'],
// 這個很重要，如果沒有配置這段，也不會進(jìn)行預(yù)編譯
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應(yīng)上。
renderAfterDocumentEvent: 'render-event'
})
})
]
};
}提前加載： Vue 3的路由支持預(yù)加載功能，可在用戶瀏覽站點時預(yù)先加載下一個頁面所需的資源。這將確保用戶切換頁面時的迅速加載和呈現(xiàn)。
const routes = [
{
path: '/home',
component: () => import('./Home.vue'),
meta: { preload: true }
},
// 其他路由...
];8.圖片資源的壓縮、icon資源使用、雪碧、代碼壓縮
嚴(yán)格說來這一步不算在編碼技術(shù)范圍內(nèi)，但是卻對頁面的加載速度影響很大。對于所有的圖片文件，都可以在一個叫tinypng的網(wǎng)站上去壓縮一下。網(wǎng)址：tinypng.com/，對頁面上使用到的icon，可以使用在線字體圖標(biāo)，或者雪碧圖，將眾多小圖標(biāo)合并到同一張圖上，用以減輕http請求壓力。然后通過操作CSS的background屬性，控制背景的位置以及大小，來展示需要的部分。
// 圖片壓縮設(shè)置
chainWebpack: config => {
// 圖片打包壓縮，使用了 --- image-webpack-loader --- 插件對圖片進(jìn)行壓縮
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
},
js代碼壓縮- - - -(webpack 自UglifyJsPlugin插件壓縮js文件)
css 代碼壓縮- - - - (采用optimize-css-assets-webpack-plugin插件來壓縮css代碼)
9. 前端頁面代碼層面的優(yōu)化
合理使用v-if和v-show
合理使用watch和computed
使用v-for必須添加key, 最好為唯一id, 避免使用index, 且在同一個標(biāo)簽上，v-for不要和v-if同時使用
定時器的銷毀?？梢栽赽eforeDestroy()生命周期內(nèi)執(zhí)行銷毀事件；也可以使用$once這個事件偵 聽器，在定義定時器事件的位置來清除定時器。詳細(xì)見vue官網(wǎng)
長列表性能優(yōu)化
- 圖片資源懶加載
- 前端接口防止重復(fù)請求實現(xiàn)方案-CSDN博客
- 用innerHTML代替dom操作，減少dom操作的次數(shù)，優(yōu)化js性能
- 合理使用requestAnimationFrame動畫代替setTimeOut
- 通過創(chuàng)建文檔碎片 document.createDocumentFragment()-創(chuàng)建虛擬dom來更新dom
10.解決白屏，體驗優(yōu)化
把上面所有的優(yōu)化都做完之后，加載速度有了顯著提升，但是在網(wǎng)慢的時候還是會有白屏，所以再白屏期間加骨架屏和loading就顯得格外重要了。
當(dāng)我們的js加載完成之后我們的img就會被覆蓋了，所以這種效果是特別好的，因為靜態(tài)資源是在我們的項目當(dāng)中直接有的，所以加載效率會特別的快，所以盡量讓圖片的大小變小這樣會更好的提高項目效率
到此這篇關(guān)于Vue首屏優(yōu)化方案小結(jié)的文章就介紹到這了,更多相關(guān)Vue首屏優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue自定義指令，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
今天小編就為大家分享一篇Vue2 監(jiān)聽屬性改變watch的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
前端架構(gòu)vue動態(tài)組件使用基礎(chǔ)教程
這篇文章主要為大家介紹了前端架構(gòu)vue動態(tài)組件使用的基礎(chǔ)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-02-02
Vue服務(wù)端渲染實踐之Web應(yīng)用首屏耗時最優(yōu)化方案
這篇文章主要介紹了Vue服務(wù)端渲染實踐之Web應(yīng)用首屏耗時最優(yōu)化方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue框架編輯接口頁面下拉級聯(lián)選擇并綁定接口所屬模塊
這篇文章主要為大家介紹了vue框架編輯接口頁面實現(xiàn)下拉級聯(lián)選擇以及綁定接口所屬模塊，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
Vue為什么要謹(jǐn)慎使用$attrs與$listeners
這篇文章主要介紹了Vue為什么要謹(jǐn)慎使用$attrs與$listeners，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了前端框架Vue.js構(gòu)建大型應(yīng)用的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
在vue.js渲染完界面之后如何再調(diào)用函數(shù)
這篇文章主要介紹了在vue.js渲染完界面之后如何再調(diào)用函數(shù)的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue-cli和移動端布局和動畫使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue3中defineProps傳值使用ref響應(yīng)式失效詳解
這篇文章主要給大家介紹了關(guān)于vue3中defineProps傳值使用ref響應(yīng)式失效的相關(guān)資料,文章通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03