前言

用vue開(kāi)發(fā)項(xiàng)目上線以后，發(fā)現(xiàn)首頁(yè)加載速度非常慢，如果項(xiàng)目比較大，甚至可能出現(xiàn)10s以上的等待。用戶體驗(yàn)非常差，試想如果你準(zhǔn)備買一雙AJ，登錄某寶首頁(yè)等了足足5s，那肯定果斷選擇某多多了。

以我們公司的項(xiàng)目為例，輸入網(wǎng)址以后會(huì)出現(xiàn)十幾秒的空白頁(yè)，如果是后臺(tái)管理系統(tǒng)還能接受，嵌套式的H5面對(duì)的是C端用戶，產(chǎn)品肯定是無(wú)法接受的。

仔細(xì)分析了下，主要是打包后的app.js太大，以及我們引用的一些插件安裝包加載比較慢，在網(wǎng)上搜了很多解決加載慢的方案，最終優(yōu)化的時(shí)間移動(dòng)端H5頁(yè)面2秒多，后臺(tái)管理系統(tǒng)5秒多。

1.路由懶加載

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

此方法會(huì)把原本打包到一個(gè)app.js文件分開(kāi)成多個(gè)js文件打包，這樣會(huì)減小單個(gè)文件的大小，但是不會(huì)減小整個(gè)js文件夾的大小。

通過(guò)這種方式可以做到按需加載，只加載單個(gè)頁(yè)面的js文件。

2、打包文件中去掉map文件

打包的app.js過(guò)大，另外還有一些生成的map文件。先將多余的map文件去掉，

找到config文件夾下index.js文件,把這個(gè)build里面的productionSourceMap改成false即可

3、CDN引入第三方庫(kù)

在項(xiàng)目開(kāi)發(fā)中，我們會(huì)用到很多第三方庫(kù)，如果可以按需引入，我們可以只引入自己需要的組件，來(lái)減少所占空間，

但也會(huì)有一些不能按需引入，我們可以采用CDN外部加載，在index.html中從CDN引入組件，去掉其他頁(yè)面的組件import，修改webpack.base.config.js，在externals中加入該組件，這是為了避免編譯時(shí)找不到組件報(bào)錯(cuò)。

4、gzip打包

gizp壓縮是一種http請(qǐng)求優(yōu)化方式，通過(guò)減少文件體積來(lái)提高加載速度。

html、js、css文件甚至json數(shù)據(jù)都可以用它壓縮，可以減小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、終極大招，預(yù)渲染

其實(shí)把上面的優(yōu)化做完，優(yōu)化到5秒以內(nèi)沒(méi)問(wèn)題了，但是如果像我司前端頁(yè)面100多個(gè)，比較大的項(xiàng)目，可能還是會(huì)有點(diǎn)慢。

上面我們做了那么多，都是基于js執(zhí)行完以后進(jìn)行的渲染，如果想要更快一點(diǎn)，還有兩種方案，一種是ssr也就是服務(wù)端渲染，一種就是預(yù)渲染。

預(yù)渲染是在js加載前，就生成了一個(gè)首頁(yè)的靜態(tài)頁(yè)面，用于加載，不會(huì)讓你等著了，靜態(tài)頁(yè)面的性能不用說(shuō)了吧，嗖嗖的。

預(yù)渲染依賴的是prerender-spa-plugin插件，使用起來(lái)也非常的簡(jiǎn)單,但是坑非常多，一個(gè)地方尊重不到就會(huì)報(bào)錯(cuò)：

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

建議使用淘寶鏡像的cnpm，因?yàn)閚pm安裝經(jīng)常失敗，血淚教訓(xùn)，倒騰了一上午

2、vue.config.js

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

在plugins下面，找到plugins對(duì)象，直接加到上面就行
// 預(yù)渲染配置
new PrerenderSPAPlugin({
    //要求-給的WebPack-輸出應(yīng)用程序的路徑預(yù)渲染。
    staticDir: path.join(__dirname, 'dist'),
    //必需，要渲染的路線。
    routes: ['/login'],
    //必須，要使用的實(shí)際渲染器，沒(méi)有則不能預(yù)編譯
    renderer: new Renderer({
        inject: {
            foo: 'bar'
        },
        headless: false, //渲染時(shí)顯示瀏覽器窗口。對(duì)調(diào)試很有用。  
        //等待渲染，直到檢測(cè)到指定元素。
        //例如，在項(xiàng)目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` 
        renderAfterDocumentEvent: 'render-event'
    })
})

3、router.js

需要把vue的router模式設(shè)置成history模式

4、main.js

在創(chuàng)建vue實(shí)例的mounted里面加一個(gè)事件，跟PrerenderSPAPlugin實(shí)例里面的renderAfterDocumentEvent對(duì)應(yīng)上。

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

這是預(yù)渲染的基本配置，npm run build 一下，如果dist文件夾多了你想預(yù)渲染的文件夾，那么恭喜你，成功了！如果項(xiàng)目是用nginx做的代理，nginx還需要做一些配置，具體是：

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

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

具體的根據(jù)自己需要欲渲染的路由自己配

雖然花了一天的時(shí)間，實(shí)現(xiàn)了預(yù)渲染，但是因?yàn)轫?xiàng)目之前用的是hash路由，預(yù)渲染需要改成history模式，需要修改登錄地址，我司用幾千個(gè)終端商戶，計(jì)劃被迫流產(chǎn)。但是確實(shí)很快，適用于自己用的后臺(tái)、新項(xiàng)目。

總結(jié)

到此這篇關(guān)于vue終極性能優(yōu)化方案(解決首頁(yè)加載慢問(wèn)題)的文章就介紹到這了,更多相關(guān)vue終極性能優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論