vue專案優化

技術選擇：

選一個好的技術當然會快許多我選擇的是vue3 它的tree shaking 確實可以讓打包後的體積小很多

CDN加速：

index頁面中加入請求連線

  <!-- vue 引入cdn -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.45/vue.global.min.js"></script>
  <!-- 引入 cdn axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>
  <!-- vue-router 引入cdn-->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.6/vue-router.global.min.js"></script>

  <!-- 引入element ui  -->
  <!-- Import component library -->
  <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.28/index.full.min.js"></script>

  <!-- dayjs -->
  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>

  <!-- 百度地圖 -->
  <!-- <script src="./index.js"></script> -->

  <!-- 這個用官網給的有好多警告 更具百度的把 https://api.map.baidu.com/getscript?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxx 換為這個就沒有那麼多 報錯了 -->
  <script
    type="text/javascript"
    src="https://api.map.baidu.com/getscript?v=2.0&ak=4GAt7jxWL2uN0RVFCBbuyuQWi9e2Er8k"
  ></script>

　在vue config js 設定

const objExternals = {
  // CDN 的 資源（和vue相關的） 依賴全域性變數 Vue， 所以 Vue 也需要使用 CDN 引入
  'vue': 'Vue',
  // 屬性名稱 Vue, 表示遇到 import xxx from 'vue' 這類引入 'vue'的，
  // 不去 node_modules 中找，而是去找 全域性變數 Vue
  'vue-router': 'VueRouter',
  'element-plus': 'ElementPlus',
  'axios': 'axios',
  'dayjs': 'dayjs'
}

module.exports = defineConfig({

configureWebpack: {

//判斷在生產環境就使用cdn, 看個人專案情況

// 這句話是否判斷處於生產環境如果是生產環境的就使用cdn加速

// externals: process.env.VUE_APP_STAGE === 'LOCAL' ? {} : objExternals

externals: objExternals

}）

設定完就能用了就在main .ts 中像往常一樣引入就好了

注意：cdn加速網站一定要找靠譜的不然它關了你專案就掛了推薦https://www.bootcdn.cn/

如果你腳手架還報錯的話推薦在開發環境下安裝一下例如 npm install axios -D

路由懶載入和分包

設定路由的時候設定為動態路由把不同的路由分割成不同的程式碼塊使入口檔案變小提高存取效率

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    meta: { title: '登入頁' },
    name: 'login',
    component: () =>
      import(/* webpackChunkName: "login" */ '@/views/Login.vue'),
  },

程式碼層面：

採用HTTP快取設定響應頭設定Cache-Control Last-Modified Etag 等

前端合理使用localStorage

合理的設定v-if 和 v-show (常切換的使用v-show 反之)

減少伺服器請求有的資料在多次使用的時候就只請求一次然後在多處使用當然在不同的頁面也要判斷資料是否存在不存在就做完第一次的請求

資料懶載入在沒有使用者瀏覽的頁面不載入數當用戶捲動到了在載入就是隻載入可視區域

用的少的外掛不去下載自己寫比如vuex 在一些小的專案中用的少的就完全沒有必要去下載vuex 自己寫一個用好多方法（我前面文章有提到）

減少dom 結構的巢狀

降低css 的選擇器

減少dom 的重繪重排

對於windows 監聽事件要及時銷燬和定時器能少開就少開極大的消耗效能

如果考慮優化原生的html 的話要考慮css 放在前面 js 放在最後（因為js 會阻止dom 的形成比如你寫了一個行內的js 程式碼 js 程式碼就會打斷dom 樹的繼續生成等著css js生成完才執行）

使用非同步元件defineAsyncComponent

當一些元件太大的時候用非同步元件當你需要載入的時候先載入出來其他元件先讓使用者看見整個框架在慢慢回來當然你也可以用個骨架框

const DetailsBanner = defineAsyncComponent(
  () => import('@/components/details/DetailsBanner.vue')
)

不生成map檔案

module.exports = {
  productionSourceMap: false, // 打包時不會生成 .map 檔案，加快打包速度
}

使用gzip壓縮程式碼減少程式碼體積

npm install --save-dev [email protected]

設定vue.config.js

const isProdOrTest = process.env.NODE_ENV !== 'development'
module.exports = defineConfig({
 chainWebpack (config) {
    // 打包壓縮
    config.plugins.delete('prefetch');//預設開啟prefetch(預先載入模組)，
     提前獲取使用者未來可能會存取的內容 在首屏會把這十幾個路由檔案，都一口氣下載了 所以我們要關閉這個功能模組
    if (isProdOrTest) {
      // 對超過10kb的檔案gzip壓縮
      config.plugin('compressionPlugin').use(
        new CompressionWebpackPlugin({
          test: /\.(js|css|html)$/,// 匹配檔名
          threshold: 10240,
        })
      );
    }
  }
})

設定完打包測試一下看一下是否有.gz結尾的有就成功了

然後在伺服器上下載模組引入我是express 伺服器直接 npm install compression

app.use(compression())

圖片加速：

頁面中圖片才是拖垮響應的重點

在專案中下載壓縮圖片的

npm install "image-webpack-loader" -D

  //  圖片壓縮
  chainWebpack (config) {
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .end()
}

使用壓縮後的圖片上網找找有好多壓縮圖片的網站壓縮完在上傳伺服器推薦（https://tinypng.com/）

使用webp 格式的圖片能很好的減小圖片大小

使用雪碧圖用一張大圖省去多個小圖片的請求但是會加大圖片體積有可能會拖慢請求

使用iconfont 輕量好修改

把小點的圖片進行壓縮成 base64格式但是圖片太大了就不適合了因為壓縮完的程式碼體積會變大

module.exports = {
...
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10240,
          name: utils.assetsPath('img/[name].[hash:7].[ext]'),
        }
      },
    ],
  },
}

使用css代替圖片或者使用cdn 圖片（但是對方網站掛了你的圖片也掛了）

使用漸進圖片 ;漸進式圖片可以讓使用者產生圖片載入變快的印象。使用者不再盯著一片空白區域等待圖片載入，而能看到影象變得越來越清晰，這樣對使用者體驗也是友好的。骨架屏技術也是類似的原理。

npm installv-progressive-image

然後在mian.ts 中引入

// 這個是圖片預載入 需要設定shims-vue.d.ts 
import vProgressiveImage from 'v-progressive-image';
createApp(App).use(router).use(vProgressiveImage).mount('#app')

然後就可以使用了

  <div v-preview="先顯示的圖片 一般都是小點圖片" v-origin="要載入的圖片src">

DNS優化

NS解析需要耗費 20-120ms，所以為了優化DNS

使用一個dns-prefetch

<link rel="dns-prefetch" href="https://baidu.com/">

技術選擇 ：