這篇文章主要介紹了vue項(xiàng)目?jī)?yōu)化首評(píng)加載速度，以及白屏?xí)r間過(guò)久的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

項(xiàng)目背景

測(cè)試環(huán)境的管理后臺(tái)應(yīng)客戶需求最近加了點(diǎn)東西，加載的東西變多，使得整個(gè)項(xiàng)目變得有點(diǎn)臃腫了，首屏以及刷新后渲染速度變得極其緩慢。之前10s左右還能勉強(qiáng)接受，這次一下干到30s，整個(gè)人都崩潰了，花了點(diǎn)時(shí)間優(yōu)化了一下。

環(huán)境：vue：2.6.11，vue-cli：3.0

splitChunks

看到上面圖片里的文件其實(shí)并不大，最大的也就287k。

這也是優(yōu)化過(guò)的，之前都是有的最大為1m左右，在vue.config.js配置splitChunks，這樣針對(duì)的大文件都變小了，但是時(shí)間上并沒(méi)有提升多少。只不過(guò)是性能優(yōu)化了一點(diǎn)。

chainWebpack: config => {
        if (process.env.NODE_ENV === "production") {
            config.optimization.splitChunks({
                chunks: "all",
                maxInitialRequests: 4,
                cacheGroups: {
                    default: {
                        name: "common",
                        minChunks: 5, // 模塊被引用2次以上的才抽離
                        priority: 1,
                        reuseExistingChunk: true, // 復(fù)用公共模塊
                    },
                    vendors: {
                        // 默認(rèn)拆分node_modules
                        test: /[\\/]node_modules[\\/]/,
                        minChunks: 1, // 默認(rèn)1
                        priority: 10,
                        name (module) {
                            // get the name. E.g. node_modules/packageName/not/this/part.js
                            // or node_modules/packageName
                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                            // npm package names are URL-safe, but some servers don't like @ symbols
                            return `npm.${packageName.replace('@', '')}`
                        }
                    },
                    elementUI: {
                        name: "chunk-elementUI", //  split elementUI into a single package
                        priority: 20, //  the weight needs to be larger than libs and app or it will be packaged into libs or app
                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/, //  in order to adapt to cnpm
                    },
                    echarts: {
                        name: "chunk-echarts", //  split elementUI into a single package
                        priority: 30, //  the weight needs to be larger than libs and app or it will be packaged into libs or app
                        test: /[\\/]node_modules[\\/]_?echarts(.*)/, //  in order to adapt to cnpm
                    },
                    xlsx: {
                        name: "chunk-xlsx", //  split elementUI into a single package
                        priority: 20, //  the weight needs to be larger than libs and app or it will be packaged into libs or app
                        test: /[\\/]node_modules[\\/]_?xlsx(.*)/, //  in order to adapt to cnpm
                    },
                    editor: {
                        name: "chunk-editor", //  split elementUI into a single package
                        priority: 50, //  the weight needs to be larger than libs and app or it will be packaged into libs or app
                        test: /[\\/]node_modules[\\/]_?vue-json-editor(.*)/, //  in order to adapt to cnpm
                    },
                },
            });
        }
    },

CDN

通過(guò)上面的那步，文件變小了，但是對(duì)于一些文件來(lái)說(shuō)echarts、XLSX、element-ui來(lái)說(shuō)，還是加載有點(diǎn)久。配置CDN后，也就幾百毫秒久加載完成了。

先在index.html配置，順序不要變，vue在首先引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
    <link rel="stylesheet"  rel="external nofollow" >
    <!-- 引入 element ui.css -->
    <link  rel="external nofollow"  rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>  
    <script src="https://cdn.bootcss.com/element-ui/2.15.7/index.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
    </div>
    <!-- built files will be auto injected -->
  </body>
  <script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>
  <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</html>

接下來(lái)在vue.config.js配置，element-ui上面要先把vue配置好

configureWebpack: (config) => {
    return {
        externals:{
            'vue': "Vue",
            'echarts': 'echarts',
            'element-ui': 'ELEMENT',
            XLSX: "XLSX",
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery",
            }),
        ],
    };
},

然后把main.js引入的vue、elementui、echart、XLSX全部注釋掉

如果要用的話直接使用。例如：

//某些js文件引入elementui
ELEMENT.Message.error(error.message)
//echarts
this.myMiddleChart = echarts.init(this.$refs.myChart);//自己加的代碼
this.myMiddleChart.setOption(this.option)
this.lineChart = echarts.init(this.$refs.lineChart);//自己加的代碼
this.lineChart.setOption(this.lineOption)
let table = document.getElementById('table');
let worksheet = XLSX.utils.table_to_sheet(table);
let workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet');
// 以上四行也可以直接一行搞定，如果不需要對(duì)表格數(shù)據(jù)進(jìn)行修改的話
let workbooked = XLSX.utils.table_to_book(document.getElementById('table'))
XLSX.writeFile(workbooked, '報(bào)表.xlsx');

GZIP

使用CDN引入，特定資源加載速度確實(shí)變快了，但是大多數(shù)文件加載還是比較慢的，加載資源也比較大。

在vue.config.js配置如下

configureWebpack: (config) => {
  return {
      externals:{
          'vue': "Vue",
          'echarts': 'echarts',
          'element-ui': 'ELEMENT',
          XLSX: "XLSX",
      },
      plugins: [
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery",
              "windows.jQuery": "jquery",
          }),
          new CompressionPlugin({
              algorithm: "gzip", // 使用gzip壓縮
              test: /\.js$|\.html$|\.css$/, // 匹配文件名
              filename: "[path].gz[query]", // 壓縮后的文件名(保持原文件名，后綴加.gz)
              minRatio: 0.8, // 壓縮率小于1才會(huì)壓縮
              threshold: 10240, // 對(duì)超過(guò)10k的數(shù)據(jù)壓縮
              deleteOriginalAssets: false, // 是否刪除未壓縮的源文件，謹(jǐn)慎設(shè)置，如果希望提供非gzip的資源，可不設(shè)置或者設(shè)置為false（比如刪除打包后的gz后還可以加載到原始資源文件）
          }),
      ],      
   };
},

然后去服務(wù)器上，找到nginx，對(duì)制定的服務(wù)開(kāi)始gzip壓縮

# 開(kāi)啟gzip
gzip on;
# 低于1kb的資源不壓縮
gzip_min_length 1k;
# 設(shè)置壓縮所需要的緩沖區(qū)大小
gzip_buffers 4 16k;
# 壓縮級(jí)別【1-9】，越大壓縮率越高，同時(shí)消耗cpu資源也越多，建議設(shè)置在4左右。
gzip_comp_level 4;
# 需要壓縮哪些響應(yīng)類型的資源，缺少自己補(bǔ)。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml;
# 配置禁用gzip條件，支持正則。此處表示ie6及以下不啟用gzip（因?yàn)閕e低版本不支持）
gzip_disable "MSIE [1-6]\.";
# 是否添加“Vary: Accept-Encoding”響應(yīng)頭，
gzip_vary on;

刪除文件預(yù)加載

以上搞完之后，首屏加載速度確實(shí)有提升。

但是頁(yè)面刷新還是有點(diǎn)慢，mac和windows加載速度不一致，mac更慢一點(diǎn)。用lighthouse跑了一下，還是不行。速度的話windows10s，mac19s，還是不行。加載的空白時(shí)間還是過(guò)長(zhǎng)。

因?yàn)?vuecli 3默認(rèn)開(kāi)啟 prefetch(預(yù)先加載模塊)，提前獲取用戶未來(lái)可能會(huì)訪問(wèn)的內(nèi)容

我看了一下，我每次刷新后回預(yù)加載11個(gè)路由，這的確很慢。體驗(yàn)沒(méi)有那么好。于是我把這個(gè)預(yù)加載給刪了

chainWebpack: config => {
//刪除預(yù)加載
config.plugins.delete('prefetch')
   if (process.env.NODE_ENV === "production") {
       config.optimization.splitChunks({
           chunks: "all",
           maxInitialRequests: 4,
           cacheGroups: {
               default: {
                   name: "common",
                   minChunks: 5, // 模塊被引用2次以上的才抽離
                   priority: 1,
                   reuseExistingChunk: true, // 復(fù)用公共模塊
               },
               vendors: {
                   // 默認(rèn)拆分node_modules
                   test: /[\\/]node_modules[\\/]/,
                   minChunks: 1, // 默認(rèn)1
                   priority: 10,
                   name (module) {
                       // get the name. E.g. node_modules/packageName/not/this/part.js
                       // or node_modules/packageName
                       const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                       // npm package names are URL-safe, but some servers don't like @ symbols
                       return `npm.${packageName.replace('@', '')}`
                   }
               },
       });
   }
 },

這樣整體的加載速度，提升到3s，最快的時(shí)候1.7s就可以加載完成。