vue項(xiàng)目首屏打開(kāi)速度慢的解決方法
最近接手了一個(gè)后臺(tái)管理系統(tǒng)，技術(shù)棧主要是vue全家桶+elementui，老大打開(kāi)測(cè)試環(huán)境頁(yè)面的時(shí)候，說(shuō)看到首頁(yè)需要6秒鐘，那如何進(jìn)行優(yōu)化呢？
首先我們需要安裝webpack-bundle-analyzer
// webpack.prod.conf.js
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
// config/index.js
build: {
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
運(yùn)行npm run build --report
我們可以看到，vendor中的elementui占了500k，怎么優(yōu)化呢？
在webpack配置文件中增加，接下來(lái)就是見(jiàn)證奇跡的時(shí)刻。
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT',
'axios': 'axios'
},
再看一下我們的vendor體積
vendor一共才195k
那缺少的elementui文件去哪里找呢？答案是cdn引用。
之前項(xiàng)目里還有引用moment，但是這個(gè)庫(kù)實(shí)在是太大了，在github上我找到一個(gè)跟momentapi完全一樣的庫(kù)，但是文件大小只要2kb。
其他優(yōu)化方法還有ssr，這個(gè)最好用nuxtjs來(lái)做，自己配置ssr實(shí)在太麻煩了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決Vue @submit 提交后不刷新頁(yè)面問(wèn)題
這篇文章主要介紹了解決Vue @submit 提交后不刷新頁(yè)面問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue.set 全局操作,結(jié)合簡(jiǎn)單實(shí)例形式分析了Vue.set 全局操作相關(guān)使用技巧與注意事項(xiàng),需要的朋友可以參考下2019-09-09
作為一個(gè)前端開(kāi)發(fā)者,我們要學(xué)會(huì)自己編寫(xiě)一些開(kāi)發(fā)工具模塊,也可以自己編寫(xiě)一些組件,甚至可以通過(guò)自己的能力編寫(xiě)一個(gè)框架出來(lái),這都需要我們能夠靈活的管理我們的包,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一文教會(huì)你在npm上傳自己的包的相關(guān)資料,需要的朋友可以參考下2023-03-03
在vue的項(xiàng)目開(kāi)發(fā)中,我們會(huì)遇到加載excel或者csv等情形,這個(gè)示例展示了這個(gè)需求,上傳一個(gè)excel文件,通過(guò)解析,生成數(shù)組,然后再列表中將內(nèi)容展示出來(lái),這篇文章主要介紹了vue上傳解析excel文件,列表中輸出內(nèi)容,需要的朋友可以參考下,2023-09-09
vue學(xué)習(xí)筆記之作用域插槽實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之作用域插槽,結(jié)合實(shí)例形式分析了vue.js作用域插槽基本使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
Vue3+Vite實(shí)現(xiàn)一個(gè)Markdown編輯器組件
在現(xiàn)代前端開(kāi)發(fā)中,Markdown 編輯器廣泛應(yīng)用于博客,文檔,Wiki,代碼注釋等場(chǎng)景,本文將使用 Vue 3 構(gòu)建一個(gè)簡(jiǎn)單的 Markdown 編輯器組件,感興趣的小伙伴可以了解下2025-04-04
vue實(shí)現(xiàn)盒子內(nèi)拖動(dòng)方塊移動(dòng)的示例代碼
這篇文章主要給大家介紹了如何通過(guò)vue實(shí)現(xiàn)盒子內(nèi)拖動(dòng)方塊移動(dòng),文章通過(guò)代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以參考閱讀本文2023-08-08
vuex中使用modules時(shí)遇到的坑及問(wèn)題
這篇文章主要介紹了vuex中使用modules時(shí)遇到的坑及問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲
這篇文章主要為大家詳細(xì)介紹了基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
Vue2.0實(shí)現(xiàn)1.0的搜索過(guò)濾器功能實(shí)例代碼
本篇文章主要介紹了Vue2.0實(shí)現(xiàn)1.0的搜索過(guò)濾器功能實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03