vue專案首次載入緩慢優化

2021-10-25 19:00:35 字數 1552 閱讀 6106

元件全域性引入改為按需引入

element-ui按需引入:

}],

"stage-2"

],"plugins": [

"transform-vue-jsx",

"transform-runtime",

["component",[

]]],

"env":

}}

根據自己已有的改

import vue from 'vue'

import from 'element-ui'

vue.component(button.name, button)

vue.component(select.name, select)

/* 或寫為

* vue.use(button)

* vue.use(select)

*/new vue()

路由懶載入

沒有懶載入的格式, 先導入後直接用匯入名

import vue from 'vue'

import router from 'vue-router'

import helloworld from '@/components/helloworld'

vue.use(router)

export default new router(]})

懶載入格式, 不需要匯入,直接在component:resolve中寫路徑

export default new router(,

// component: login

component:resolve => require(['../page/login'], resolve)

}]})

nginx 是否開啟 gzip

在nginx的配置檔案中加入如下配置, 加在http裡面

gzip on;

#不壓縮臨界值,大於1k的才壓縮,一般不用改

gzip_min_length 1k;

#buffer,就是,嗯,算了不解釋了,不用改

gzip_buffers 4 16k;

#用了反向**的話,末端通訊是http/1.0,預設是http/1.1

#壓縮級別,1-10,數字越大壓縮的越好,時間也越長,看心情隨便改吧

gzip_comp_level 2;

#跟squid等快取服務有關,on的話會在header裡增加"vary: accept-encoding"

gzip_vary off;

#ie6對gzip不怎麼友好,不給它gzip了

vue專案首次載入時間很長(gzip篇)

vue專案首次開啟載入很慢,主要是打包後的三個檔案載入很慢 我們把滑鼠放到其中的乙個檔案上,檢視載入的詳細耗時,可以看到時間主要是花費在content download上了,這是我們就可以選擇gzip優化 如何確定gzip是否生效?開啟控制台,切換到network,選中之前載入比較慢的三個檔案,可以...

Vue專案使用CDN優化載入

在vue專案中,引入到工程中的所有js css檔案,編譯時都會被打包進vendor.js,瀏覽器在載入該檔案之後才能開始顯示首屏。若是引入的庫眾多,那麼vendor.js檔案體積將會相當的大,影響首開的體驗。解決方法是,將引用的外部js css檔案剝離開來,不編譯到vendor.js中,而是用資源的...

vue專案優化,路由懶載入

當打包專案時,js包會變得非常的大影響頁面載入,影響頁面載入,如果我們把不同路由對應的元件分割成不同的 塊,當路由被訪問時才載入對應的元件,這樣就更加高效了。1.安裝 babel plugin syntax dynamic import 2.配置babel plugins在babel.config....