基于vue3?vue-cli4?線上部署及優(yōu)化的問題

更新時(shí)間：2023年06月01日 09:53:32 作者：倪風(fēng)6

這篇文章主要介紹了基于vue3?vue-cli4?線上部署及優(yōu)化的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

起因

之前部署一直是直接使用docker在服務(wù)器上npm run serve直接運(yùn)行，沒出現(xiàn)什么問題，這次部署時(shí)真的難受到我了，第一次打開的速度真的慢的要死，首次加載至少要5s左右，這誰受得了，于是開始網(wǎng)上找教程

過程

開始使用 npm run build 打包項(xiàng)目，在dist目錄下，我嘗試在本地打開index.html。頁(yè)面完全空白，打開控制臺(tái)，發(fā)現(xiàn)全是關(guān)于

Failed to load resource: net::ERR_FILE_NOT_FOUND

的報(bào)錯(cuò)

找了相關(guān)教程，這個(gè)問題解決還是挺簡(jiǎn)單的，只需要在根目錄下創(chuàng)建一個(gè)vue.config.js的文件，添加上以下內(nèi)容，重新build就行了

module.exports = {
    publicPath: './',
};

接著，我把項(xiàng)目打包到服務(wù)器上，使用docker apache進(jìn)行上線

docker run -p 80:80 -itd --name codetip_net_client  -v /root/codetip/client:/usr/local/apache2/htdocs httpd

我直接run了httpd服務(wù)，沒有鏡像他會(huì)自己自動(dòng)拉取，映射了本地目錄 /root/codetip/client，只需要將dist中的內(nèi)容上傳即可。

上線成功后，我發(fā)現(xiàn)，好了一點(diǎn)（可能是錯(cuò)覺），但是還是特別慢，于是繼續(xù)找問題，最后發(fā)現(xiàn)，我們?cè)赽uild的時(shí)候，在js目錄下，會(huì)自動(dòng)創(chuàng)建很多map文件，一個(gè)js對(duì)應(yīng)一個(gè)map，這個(gè)的作用主要是在我們開發(fā)過程中，給我們錯(cuò)誤進(jìn)行定位用的，比如某個(gè)地方報(bào)錯(cuò)了，他會(huì)給我們指出在第幾行出現(xiàn)的問題，但我們的線上應(yīng)用可用不著這個(gè)，只需要在上面說到的vue.config.js這個(gè)文件中再添加上一段下方的代碼就行了

productionSourceMap: false, // 生產(chǎn)環(huán)境是否生成 sourceMap 文件

配置之后少了map文件，速度確實(shí)快了不少，不過，還是不滿足，可其他網(wǎng)站比起來還是有些差距，繼續(xù)優(yōu)化

路由懶加載優(yōu)化

在router/index.js中將由非懶加載改成懶加載。非懶加載的情況下，會(huì)將所有的配置文件都放到一個(gè)js文件中，導(dǎo)致這個(gè)文件非常大，每次首次請(qǐng)求都會(huì)先加載這個(gè)文件；而懶加載，創(chuàng)建多個(gè)js文件，相當(dāng)于按需加載，每個(gè)頁(yè)面加載對(duì)應(yīng)的js文件

開啟apache gzip

這需要vue項(xiàng)目和服務(wù)端項(xiàng)目都開啟gzip

vue中安裝：

npm install -D compression-webpack-plugin

接著在vue.config.js中添加以下代碼即可

  configureWebpack: {
    plugins: [
        new CompressionPlugin({
            test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,//需要壓縮的文件正則
            threshold: 10240,//文件大小大于這個(gè)值時(shí)啟用壓縮
            deleteOriginalAssets: false//壓縮后保留原文件
        })
    ]
  }

我們之前使用的是docker的httpd，接下來我們開啟他的gzip

先進(jìn)入容器

docker exec -it codetip_net_client bash

容器初始化是沒有編輯器的，這里我們先安裝一個(gè)vim

apt update -y
apt install vim -y

接下來打開httpd的配置文件

vim /usr/local/apache2/conf/httpd.conf

打開以下兩個(gè)文件的注釋

LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so

接下來在文件最后添加上以下內(nèi)容：

#使用<IfModule deflate_module> 和 <IfModule mod_deflate.c> 經(jīng)過測(cè)試沒什么區(qū)別
<IfModule deflate_module>
　　# 就像一個(gè)開關(guān)一樣，告訴 Apache 對(duì)傳輸?shù)綖g覽器的內(nèi)容進(jìn)行壓縮
　　SetOutputFilter DEFLATE
　　# 壓縮級(jí)別 9是最高級(jí) 1是最低級(jí)，不建議使用太高的壓縮比，這樣會(huì)對(duì)CPU產(chǎn)生太大的負(fù)擔(dān)
　　DeflateCompressionLevel 9
</IfModule>
<IfModule mod_deflate.c>
    # 告訴 apache 對(duì)傳輸?shù)綖g覽器的內(nèi)容進(jìn)行壓縮
    SetOutputFilter DEFLATE
    # 壓縮等級(jí) 9 最低是1，不建議按最大級(jí)別進(jìn)行壓縮，壓縮率過高會(huì)占更多CPU資源
    DeflateCompressionLevel 9
    # 設(shè)置不對(duì)后綴gif，jpg，jpeg，png的圖片文件進(jìn)行壓縮
    SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>
<IfModule mod_deflate.c>
    # 壓縮等級(jí) 9
    DeflateCompressionLevel 9
    # 壓縮類型 html、xml、php、css、js 面的文件MIME類型可以根據(jù)自己情況添加
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-javascript application/x-httpd-php
    AddOutputFilter DEFLATE js css
</IfModule>

之后重啟docker容器（或者重啟apache）

docker stop codetip_net_client  
docker start codetip_net_client

開啟之后，速度真的提升不止一點(diǎn)點(diǎn)

開啟keep-alive

對(duì)于部分頁(yè)面開啟這個(gè)緩存功能有助于提升訪問的效果，但值得注意的是，開啟后我們需要將部分動(dòng)態(tài)請(qǐng)求的數(shù)據(jù)轉(zhuǎn)移到activated這個(gè)生命周期中，因?yàn)槲覀冮_啟后，我們?cè)僬?qǐng)求同一個(gè)頁(yè)面的時(shí)候，它默認(rèn)只會(huì)執(zhí)行activated這個(gè)生命周期中的內(nèi)容，其他將調(diào)用緩存中的內(nèi)容

添加首屏加載動(dòng)畫

這個(gè)功能是在我們第一次訪問頁(yè)面的時(shí)候出現(xiàn)的，相信很多人在項(xiàng)目搭建到服務(wù)器上的時(shí)候，會(huì)出現(xiàn)第一次打開白屏很久的這個(gè)問題，這是因?yàn)轫?xiàng)目需要先請(qǐng)求到j(luò)s和css等文件，請(qǐng)求完后才會(huì)渲染頁(yè)面，為了解決這個(gè)問題，我在上面也說了很多方法，但總有那么一下白屏也是很難受的，所以我們可以在頁(yè)面添加上一個(gè)加載功能，在項(xiàng)目中/public/index.html文件中添加上對(duì)應(yīng)代碼：

  <style>
    @-webkit-keyframes enter {
      0% {
        opacity: 0;
        top: -10px;
      }
      5% {
        opacity: 1;
        top: 0px;
      }
      50.9% {
        opacity: 1;
        top: 0px;
      }
      55.9% {
        opacity: 0;
        top: 10px;
      }
    }
    @keyframes enter {
      0% {
        opacity: 0;
        top: -10px;
      }
      5% {
        opacity: 1;
        top: 0px;
      }
      50.9% {
        opacity: 1;
        top: 0px;
      }
      55.9% {
        opacity: 0;
        top: 10px;
      }
    }
    @-moz-keyframes enter {
      0% {
        opacity: 0;
        top: -10px;
      }
      5% {
        opacity: 1;
        top: 0px;
      }
      50.9% {
        opacity: 1;
        top: 0px;
      }
      55.9% {
        opacity: 0;
        top: 10px;
      }
    }
    body {
      background: #f8f8f9;
    }
    #app-loader {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -27.5px;
      margin-top: -27.5px;
    }
    #app-loader .square {
      background: #2d8cf0;
      width: 15px;
      height: 15px;
      float: left;
      top: -10px;
      margin-right: 5px;
      margin-top: 5px;
      position: relative;
      opacity: 0;
      -webkit-animation: enter 6s infinite;
      animation: enter 6s infinite;
    }
    #app-loader .enter {
      top: 0px;
      opacity: 1;
    }
    #app-loader .square:nth-child(1) {
      -webkit-animation-delay: 1.8s;
      -moz-animation-delay: 1.8s;
      animation-delay: 1.8s;
    }
    #app-loader .square:nth-child(2) {
      -webkit-animation-delay: 2.1s;
      -moz-animation-delay: 2.1s;
      animation-delay: 2.1s;
    }
    #app-loader .square:nth-child(3) {
      -webkit-animation-delay: 2.4s;
      -moz-animation-delay: 2.4s;
      animation-delay: 2.4s;
      background: #ff9900;
    }
    #app-loader .square:nth-child(4) {
      -webkit-animation-delay: 0.9s;
      -moz-animation-delay: 0.9s;
      animation-delay: 0.9s;
    }
    #app-loader .square:nth-child(5) {
      -webkit-animation-delay: 1.2s;
      -moz-animation-delay: 1.2s;
      animation-delay: 1.2s;
    }
    #app-loader .square:nth-child(6) {
      -webkit-animation-delay: 1.5s;
      -moz-animation-delay: 1.5s;
      animation-delay: 1.5s;
    }
    #app-loader .square:nth-child(8) {
      -webkit-animation-delay: 0.3s;
      -moz-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }
    #app-loader .square:nth-child(9) {
      -webkit-animation-delay: 0.6s;
      -moz-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }
    #app-loader .clear {
      clear: both;
    }
    #app-loader .last {
      margin-right: 0;
    }
    #app-loader .loader-content {
      color: #3498db;
      font-size: 16px;
      font-weight: 600;
    }
  </style>

    <div id="app-loader">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square last"></div>
    <div class="square clear"></div>
    <div class="square"></div>
    <div class="square last"></div>
    <div class="square clear"></div>
    <div class="square "></div>
    <div class="square last"></div>
    <div class="loader-content">
      <span>Loading...</span>
    </div>
  </div>

然后到我們APP.vue中添加上

這里的nextTick是為了在我們頁(yè)面dom發(fā)生變化的時(shí)候執(zhí)行，移除加載代碼

import { nextTick } from "vue";
  nextTick(function () {
    try {
      document.body.removeChild(document.getElementById("app-loader"));
    } catch (e) {}
  });

效果：

因?yàn)榉?wù)器速度太快，只有一小會(huì)的顯示