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