---
# System prepended metadata

title: Vite build效能優化
tags: [Vite]

---

# Vite build效能優化
###### tags: `Vite`

前端構建打包工具，運行build時，會默認把項目中所有用到的第三方資源打包成一個 js 文件中 vendor.js，如果不加以拆分，這個文件將會很大導致首屏加載速度變慢，我們可以透過用 cdn加載的方式，優化打包後的大小和加載速度。

## 配置cdn方法
### [vite-plugin-cdn-import](https://github.com/mmf-fe/vite-plugin-cdn-import)

:::info
npm install vite-plugin-cdn-import --save-dev
:::

``` javascript=
// vite.config.js
import  importToCDN from 'vite-plugin-cdn-import'

export default defineConfig({
    plugins: [
        importToCDN({
            modules: [
                {
                    name: 'vue',
                    var: 'Vue',
                    path: 'https://unpkg.com/vue@3/dist/vue.global.js'
                },


                {
                    name: 'vue-router',
                    var: 'VueRouter',
                    path: 'https://unpkg.com/vue-router@4.0.16/dist/vue-router.global.prod.js'
                },

                {
                    name: 'axios',
                    var: 'axios',
                    mode: 'load',
                    path: 'https://cdn.jsdelivr.net/npm/axios@1.2.1/dist/axios.min.js',
                }
            ],
        }),
        reactRefresh(),
    ],
})
```
``` javascript=
// main.js
import { createApp } from 'vue'
import axios from 'axios'
import router from 'router'
import App from './App.vue'

createApp(App).use(axios).use(router).mount('#app')
```

### rollup-plugin-external-globals
:::info
npm install -D rollup-plugin-external-globals
:::
``` javascript=
// vite.config.js
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import externalGlobals from "rollup-plugin-external-globals"; //打包後要使用cdn的變數時需要安裝此外掛,開發時一樣可以用import引入使用.

export default defineConfig({
  build: {
    rollupOptions: {
      //當成外部模組
      external: ['vue', 'axios', 'vue-router'], //不打包 用cdn引入要記得在index.html頁面掛上cdn不然打包後會出錯
      plugins: [ 
        externalGlobals({ //打包後使用cdn的配置
          vue: "Vue",
          axios: 'axios',
          ['vue-router']: 'VueRouter'
        })
      ],
      outDir: 'dist', // 構建輸出路徑
    },
})
```

``` html=
// index.html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.16/dist/vue-router.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.2.1/dist/axios.min.js"></script>

```

## 輔助工具
### rollup-plugin-visualizer
rollup打包體積分析，當執行npm run build進行打包時，出現打包體積的可視化面板，方便我們直觀看到性能優化前後打包的體積差異
``` javascript=
// vite.config.js
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import  {visualizer} from  'rollup-plugin-visualizer'

export default defineConfig({
    plugins: [vue(),visualizer({open:true})],
})
```

## 參考資料:
* [vite配置cdn優化打包體積
](https://blog.csdn.net/m0_68324632/article/details/126828350)
* [vite vue3 初體驗
](https://dotblogs.com.tw/jason_front/2021/12/04/212149)
* [Vue3 + Vite 如何使用 CDN 加載資源](https://ainyi.com/119)