快捷導(dǎo)航

Vue首屏加載過(guò)慢出現(xiàn)白屏的6種優(yōu)化方案匯總

更新時(shí)間：2023年02月08日 12:32:09 作者：1024小神

vue項(xiàng)目打包上線后,首次打開會(huì)發(fā)現(xiàn)加載很慢,出現(xiàn)白屏的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue首屏加載過(guò)慢出現(xiàn)白屏的6種優(yōu)化方案,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

公司業(yè)務(wù)展示官網(wǎng)開發(fā)，構(gòu)建版本后在測(cè)試環(huán)境下，發(fā)下首屏加載損耗高達(dá)幾十秒（服務(wù)器在國(guó)外，所以也導(dǎo)致加載時(shí)間變長(zhǎng)），于是采用了以下方法來(lái)達(dá)到提速目的。

1. 采用懶加載的方式

路由懶加載和組件懶加載：const One = ()=>import("./one");

圖片懶加載：使用vue-lazyload插件

//引入vue懶加載
import VueLazyload from 'vue-lazyload'
 
//方法一：  沒(méi)有頁(yè)面加載中的圖片和頁(yè)面圖片加載錯(cuò)誤的圖片顯示
// Vue.use(VueLazyload)
 
//方法二：  顯示頁(yè)面圖片加載中的圖片和頁(yè)面圖片加載錯(cuò)誤的圖片
//引入圖片
import loading from '@/assets/images/load.jpg'
//注冊(cè)圖片懶加載  
Vue.use(VueLazyload, {
  // preLoad: 1.3,
  error: '@/assets/images/error.jpg',//圖片錯(cuò)誤的替換圖片路徑(可以使用變量存儲(chǔ))
  loading: loading,//正在加載的圖片路徑(可以使用變量存儲(chǔ))
  // attempt: 1
})

2.webpack開啟gzip壓縮文件傳輸模式

gizp壓縮是一種http請(qǐng)求優(yōu)化方式，通過(guò)減少文件體積來(lái)提高加載速度。html、js、css文件甚至json數(shù)據(jù)都可以用它壓縮，可以減小60%以上的體積。

webpack打包時(shí)借助 compression webpack plugin實(shí)現(xiàn)gzip壓縮，安裝插件如下：npm i -D compression-webpack-plugin

在vue-cli 3.0 中，vue.config.js配置如下：

const CompressionPlugin = require('compression-webpack-plugin');//引入gzip壓縮插件
module.exports = {
    plugins:[
        new CompressionPlugin({//gzip壓縮配置
            test:/\.js$|\.html$|\.css/,//匹配文件名
            threshold:10240,//對(duì)超過(guò)10kb的數(shù)據(jù)進(jìn)行壓縮
            deleteOriginalAssets:false,//是否刪除原文件
        })
    ]
}

服務(wù)器nginx開啟gzip:

3.依賴模塊采用第三方cdn資源

修改vue.config.js

module.exports = {
    ...
    externals: {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT'
    }    
    ...
}

4.禁止生成map文件

在vue.config.js配置：

module.exports = {
    productionSourceMap: false, // 生產(chǎn)環(huán)境是否生成 sourceMap 文件，一般情況不建議打開
}

在設(shè)置了productionSourceMap: false之后，就不會(huì)生成map文件，map文件的作用在于：項(xiàng)目打包后，代碼都是經(jīng)過(guò)壓縮加密的，如果運(yùn)行時(shí)報(bào)錯(cuò)，輸出的錯(cuò)誤信息無(wú)法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。也就是說(shuō)map文件相當(dāng)于是查看源碼的一個(gè)東西。如果不需要定位問(wèn)題，并且不想被看到源碼，就把productionSourceMap 置為false，既可以減少包大小，也可以加密源碼。

5.去掉代碼中的console和debugger

打包之后控制臺(tái)很干凈，部署正式環(huán)境之前最好這樣做。

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
    }
  },

6. 預(yù)渲染配置

使用插件：prerender-spa-plugin

vue.config.js中配置如下：

const PrerenderSpaPlugin = require('prerender-spa-plugin');
const Render = PrerenderSpaPlugin.PuppeteerRenderer;
const path = require('path');
 
configureWebpack: () => {
  if (process.env.NODE_ENV !== 'production') return;
  return {
    plugins: [
      new PrerenderSPAPlugin({
        // 生成文件的路徑，也可以與webpakc打包的一致。
        // 下面這句話非常重要?。?！
        // 這個(gè)目錄只能有一級(jí)，如果目錄層次大于一級(jí)，在生成的時(shí)候不會(huì)有任何錯(cuò)誤提示，在預(yù)渲染的時(shí)候只會(huì)卡著不動(dòng)。
        staticDir: path.join(__dirname, 'dist'),
 
        // 對(duì)應(yīng)自己的路由文件，比如a有參數(shù)，就需要寫成 /a/param1。
        routes: ['/', '/Login', '/Home'],
 
        // 這個(gè)很重要，如果沒(méi)有配置這段，也不會(huì)進(jìn)行預(yù)編譯
        renderer: new Renderer({
          inject: {
            foo: 'bar'
          },
          headless: false,
          // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對(duì)應(yīng)上。
          renderAfterDocumentEvent: 'render-event'
        })
      })
    ]
  };
}