vue終極效能優化方案(解決首頁載入慢問題)

2022-02-23 13:02:02

前言

用vue開發專案上線以後，發現首頁載入速度非常慢，如果專案比較大，甚至可能出現10s以上的等待。使用者體驗非常差，試想如果你準備買一雙AJ，登入某寶首頁等了足足5s，那肯定果斷選擇某多多了。

以我們公司的專案為例，輸入網址以後會出現十幾秒的空白頁，如果是後臺管理系統還能接受，巢狀式的H5面對的是C端使用者，產品肯定是無法接受的。

仔細分析了下，主要是打包後的app.js太大，以及我們參照的一些外掛安裝包載入比較慢，在網上搜了很多解決載入慢的方案，最終優化的時間行動端H5頁面2秒多，後臺管理系統5秒多。

1.路由懶載入

{
    path: '/chinaWine',
    name: 'chinaWine',
    component: resolve => require(['./views/chinaWine'], resolve)
},

此方法會把原本打包到一個app.js檔案分開成多個js檔案打包，這樣會減小單個檔案的大小，但是不會減小整個js資料夾的大小。

通過這種方式可以做到按需載入，只載入單個頁面的js檔案。

2、打包檔案中去掉map檔案

打包的app.js過大，另外還有一些生成的map檔案。先將多餘的map檔案去掉，

找到config資料夾下index.js檔案,把這個build裡面的productionSourceMap改成false即可

3、CDN引入第三方庫

在專案開發中，我們會用到很多第三方庫，如果可以按需引入，我們可以只引入自己需要的元件，來減少所佔空間，

但也會有一些不能按需引入，我們可以採用CDN外部載入，在index.html中從CDN引入元件，去掉其他頁面的元件import，修改webpack.base.config.js，在externals中加入該元件，這是為了避免編譯時找不到元件報錯。

4、gzip打包

gizp壓縮是一種http請求優化方式，通過減少檔案體積來提高載入速度。

html、js、css檔案甚至json資料都可以用它壓縮，可以減小60%以上的體積。

1、npm i -D compression-webpack-plugin

2、在vue.config.js中設定

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
            })]
        }
    }
}

3、在NGINX中設定

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 ：修改設定後重新載入生效

5、終極大招，預渲染

其實把上面的優化做完，優化到5秒以內沒問題了，但是如果像我司前端頁面100多個，比較大的專案，可能還是會有點慢。

上面我們做了那麼多，都是基於js執行完以後進行的渲染，如果想要更快一點，還有兩種方案，一種是ssr也就是伺服器端渲染，一種就是預渲染。

預渲染是在js載入前，就生成了一個首頁的靜態頁面，用於載入，不會讓你等著了，靜態頁面的效能不用說了吧，嗖嗖的。

預渲染依賴的是prerender-spa-plugin外掛，使用起來也非常的簡單,但是坑非常多，一個地方尊重不到就會報錯：

1、cnpm install prerender-spa-plugin --save-dev

建議使用淘寶映象的cnpm，因為npm安裝經常失敗，血淚教訓，倒騰了一上午

2、vue.config.js

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

在plugins下面，找到plugins物件，直接加到上面就行
// 預渲染設定
new PrerenderSPAPlugin({
    //要求-給的WebPack-輸出應用程式的路徑預渲染。
    staticDir: path.join(__dirname, 'dist'),
    //必需，要渲染的路線。
    routes: ['/login'],
    //必須，要使用的實際渲染器，沒有則不能預編譯
    renderer: new Renderer({
        inject: {
            foo: 'bar'
        },
        headless: false, //渲染時顯示瀏覽器視窗。對偵錯很有用。  
        //等待渲染，直到檢測到指定元素。
        //例如，在專案入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` 
        renderAfterDocumentEvent: 'render-event'
    })
})

3、router.js

需要把vue的router模式設定成history模式

4、main.js

在建立vue範例的mounted裡面加一個事件，跟PrerenderSPAPlugin範例裡面的renderAfterDocumentEvent對應上。

mounted () {
    document.dispatchEvent(new Event('render-event'))
 },

這是預渲染的基本設定，npm run build 一下，如果dist資料夾多了你想預渲染的資料夾，那麼恭喜你，成功了！如果專案是用nginx做的代理，nginx還需要做一些設定，具體是：

location = / {
  try_files /home/index.html /index.html;
}

location / {
  try_files $uri $uri/ /index.html;
}

具體的根據自己需要欲渲染的路由自己配

雖然花了一天的時間，實現了預渲染，但是因為專案之前用的是hash路由，預渲染需要改成history模式，需要修改登入地址，我司用幾千個終端商戶，計劃被迫流產。但是確實很快，適用於自己用的後臺、新專案。

總結

到此這篇關於vue終極效能優化方案(解決首頁載入慢問題)的文章就介紹到這了,更多相關vue終極效能優化內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！