您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue怎么解決首頁加載慢的問題”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“vue怎么解決首頁加載慢的問題”吧!
{ path: '/chinaWine', name: 'chinaWine', component: resolve => require(['./views/chinaWine'], resolve) },
此方法會把原本打包到一個app.js文件分開成多個js文件打包,這樣會減小單個文件的大小,但是不會減小整個js文件夾的大小。
通過這種方式可以做到按需加載,只加載單個頁面的js文件。
打包的app.js過大,另外還有一些生成的map文件。先將多余的map文件去掉,
找到config文件夾下index.js文件,把這個build里面的productionSourceMap改成false即可
在項目開發(fā)中,我們會用到很多第三方庫,如果可以按需引入,我們可以只引入自己需要的組件,來減少所占空間,
但也會有一些不能按需引入,我們可以采用CDN外部加載,在index.html中從CDN引入組件,去掉其他頁面的組件import,修改webpack.base.config.js,在externals中加入該組件,這是為了避免編譯時找不到組件報錯。
gizp壓縮是一種http請求優(yōu)化方式,通過減少文件體積來提高加載速度。
html、js、css文件甚至json數(shù)據(jù)都可以用它壓縮,可以減小60%以上的體積。
const CompressionPlugin = require('compression-webpack-plugin') configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { plugins: [new CompressionPlugin({ test: /\.js$|\.html$|\.css/, threshold: 10240, deleteOriginalAssets: false })] } } }
http { gzip on; gzip_min_length 1k; gzip_buffers 4 8k; gzip_http_version 1.0; gzip_comp_level 8; gzip_proxied any; gzip_types application/javascript text/css image/gif; gzip_vary on; gzip_disable "MSIE [1-6]\."; #以下的配置省略... }
nginx -s reload :修改配置后重新加載生效
其實把上面的優(yōu)化做完,優(yōu)化到5秒以內(nèi)沒問題了,但是如果像我司前端頁面100多個,比較大的項目,可能還是會有點慢。
上面我們做了那么多,都是基于js執(zhí)行完以后進(jìn)行的渲染,如果想要更快一點,還有兩種方案,一種是ssr也就是服務(wù)端渲染,一種就是預(yù)渲染。
預(yù)渲染是在js加載前,就生成了一個首頁的靜態(tài)頁面,用于加載,不會讓你等著了,靜態(tài)頁面的性能不用說了吧,嗖嗖的。
預(yù)渲染依賴的是prerender-spa-plugin插件,使用起來也非常的簡單,但是坑非常多,一個地方尊重不到就會報錯:
建議使用淘寶鏡像的cnpm,因為npm安裝經(jīng)常失敗,血淚教訓(xùn),倒騰了一上午
const path = require('path'); const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; 在plugins下面,找到plugins對象,直接加到上面就行 // 預(yù)渲染配置 new PrerenderSPAPlugin({ //要求-給的WebPack-輸出應(yīng)用程序的路徑預(yù)渲染。 staticDir: path.join(__dirname, 'dist'), //必需,要渲染的路線。 routes: ['/login'], //必須,要使用的實際渲染器,沒有則不能預(yù)編譯 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, //渲染時顯示瀏覽器窗口。對調(diào)試很有用。 //等待渲染,直到檢測到指定元素。 //例如,在項目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` renderAfterDocumentEvent: 'render-event' }) })
需要把vue的router模式設(shè)置成history模式
在創(chuàng)建vue實例的mounted里面加一個事件,跟PrerenderSPAPlugin實例里面的renderAfterDocumentEvent對應(yīng)上。
mounted () { document.dispatchEvent(new Event('render-event')) },
這是預(yù)渲染的基本配置,npm run build 一下,如果dist文件夾多了你想預(yù)渲染的文件夾,那么恭喜你,成功了!如果項目是用nginx做的代理,nginx還需要做一些配置,具體是:
location = / { try_files /home/index.html /index.html; } location / { try_files $uri $uri/ /index.html; }
具體的根據(jù)自己需要欲渲染的路由自己配
感謝各位的閱讀,以上就是“vue怎么解決首頁加載慢的問題”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對vue怎么解決首頁加載慢的問題這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。