vue專案最佳化

喬木滴滴發表於2023-02-23
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 compression-webpack-plugin@1.1.2

配置vue.config.js

   c
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/">

　　

相關文章