為何當(dāng)一個(gè)VUE項(xiàng)目過(guò)大時(shí)，打包之后初次訪問(wèn)首頁(yè)加載速度會(huì)異常的緩慢，是什么原因?qū)е乱约叭绾谓鉀Q這些問(wèn)題?

首頁(yè)打開(kāi)速度慢的原因

其實(shí)瀏覽器加載一個(gè)頁(yè)面的過(guò)程就是通過(guò)http協(xié)議從服務(wù)器端下載項(xiàng)目所需要的資源，將html js 圖片文件下載到本地解析后顯示出來(lái)，如果出現(xiàn)網(wǎng)頁(yè)加載速度慢，打不開(kāi)無(wú)非以下幾個(gè)原因：

程序自身的Bug導(dǎo)致頁(yè)面加載異常

項(xiàng)目的資源太大(如果js 大的圖片)導(dǎo)致訪問(wèn)瀏覽器從服務(wù)器獲取的所需資源的時(shí)間較長(zhǎng)

網(wǎng)速慢等

所以當(dāng)我們的項(xiàng)目出現(xiàn)這種問(wèn)題時(shí)只要F12開(kāi)啟瀏覽器的控制臺(tái)看下network中請(qǐng)求資源的耗時(shí)即可找出問(wèn)題，通過(guò)觀察，現(xiàn)在前端的單頁(yè)面應(yīng)用都是是靠 js 生成，因?yàn)槭莝pa，而且所有的渲染都在腳本上，js執(zhí)行需要時(shí)間。另外加載js也要時(shí)間，所以頁(yè)面越大，加載時(shí)間越長(zhǎng)，而且js執(zhí)行的時(shí)間也長(zhǎng)，所以會(huì)出現(xiàn)白屏的情況。

如何解決這個(gè)問(wèn)題

導(dǎo)致這個(gè)問(wèn)題的原因就是我們項(xiàng)目打包后資源太大導(dǎo)致，所以我們可以盡量的減少優(yōu)化打包后文件的大小，這樣問(wèn)題便迎刃而解，怎么去優(yōu)化通常有以下幾點(diǎn)：

利用路由的懶加載實(shí)現(xiàn)組件的按需加載，這樣配置后只有當(dāng)路由被訪問(wèn)時(shí)才會(huì)加載對(duì)應(yīng)的組件，而不是在加載首頁(yè)的時(shí)候就直接加載。

{ path: "/usercenter/personal", title: "個(gè)人信息", component: resolve => { require(["@/views/usercenter/personal.vue"], resolve); //通過(guò)requie動(dòng)態(tài)加載即可 } },

異步加載組件

既然是異步加載，就會(huì)存在加載失敗等異常情況。這時(shí)候怎么辦呢？看官網(wǎng)紿出的另一個(gè)特性

這樣就可以完美的解決我們的疑問(wèn)了，當(dāng)異步組件加載失敗后會(huì)顯示錯(cuò)誤的組件。

1. ?禁用線上生成的map文件

npm run build編譯之后，我們查看編譯生成的文件，發(fā)現(xiàn)有很多.map文件，這些文件也占了不小的空間。.map文件的作用是幫助編譯后的代碼調(diào)試，但是我們上線的代碼已經(jīng)調(diào)試完成，所以上線時(shí)可以不生成.map文件。

productionSourceMap:?

false? //配置webpack中productionSourceMap值為false即可

2.??啟用Nginx的gzip壓縮功能

在nginx.conf中的http{ }中添加如下代碼即可：

gzip on;gzip_disable "msie6";gzip_vary on;gzip_proxied any;gzip_comp_level 1;gzip_buffers 16 8k;gzip_http_version 1.0;gzip_min_length 256;gzip_types text/plain text/css application/jsonapplication/x-javascript text/xml application/xmlapplication/xml+rss text/javascript????application/vnd.ms-fontobjectapplication/x-font-ttf?font/opentype???image/svg+xml?image/x-icon image/jpeg image/gifimage/png;

配置好后重啟服務(wù)重新訪問(wèn)網(wǎng)站在控制臺(tái)中查看是否生效

3. 對(duì)于一些通用的工具庫(kù)可以采用CDN引入，如Jquery，在index.html中從CDN引入，去掉其他頁(yè)面的組件import，修改webpack.base.config.js，在externals中加入該組件即可。

4.?服務(wù)器端SSR渲染。?SSR需要在頁(yè)面架構(gòu)做一些對(duì)應(yīng)的調(diào)整，稍微復(fù)雜，具體可參考https://segmentfault.com/a/1190000015964813。

5.?代碼層面的優(yōu)化，精靈圖，組件化模塊化，優(yōu)化代碼邏輯，提高代碼復(fù)用性等。

?

了解新鈦云服

新鈦云服正式獲批工信部ISP/IDC(含互聯(lián)網(wǎng)資源協(xié)作)牌照

深耕專業(yè)，矗立鰲頭，新鈦云服獲千萬(wàn)Pre-A輪融資

原電訊盈科中國(guó)區(qū)副總裁加入新鈦云服「附專訪」

新鈦云服，打造最專業(yè)的Cloud?MSP+，做企業(yè)業(yè)務(wù)和云之間的橋梁

新鈦云服一周年，完成兩輪融資，服務(wù)五十多家客戶

上海某倉(cāng)儲(chǔ)物流電子商務(wù)公司混合云解決方案

新鈦云服出品的部分精品技術(shù)干貨

國(guó)內(nèi)主流公有云VPC使用對(duì)比及總結(jié)

萬(wàn)字長(zhǎng)文：云架構(gòu)設(shè)計(jì)原則|附PDF下載

剛剛，OpenStack 第 19 個(gè)版本來(lái)了，附28項(xiàng)特性詳細(xì)解讀！

Ceph OSD故障排除|萬(wàn)字經(jīng)驗(yàn)總結(jié)

七個(gè)用于Docker和Kubernetes防護(hù)的安全工具

運(yùn)維人的終身成長(zhǎng)，從清單管理開(kāi)始|萬(wàn)字長(zhǎng)文！

OpenStack與ZStack深度對(duì)比：架構(gòu)、部署、計(jì)算存儲(chǔ)與網(wǎng)絡(luò)、運(yùn)維監(jiān)控等

什么是云原生？

IT混合云戰(zhàn)略：是什么、為什么，如何構(gòu)建？

總結(jié)

以上是生活随笔為你收集整理的iframe js 加载失败_如何提高Vue项目首页的加载速度的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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