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

Posted on by

前言

用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終極性能優化內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：