2024-07-15 記錄一則vue網站最佳化的小技巧

vite+vue+某框架寫的網站可以透過配置vite.config.js中的build.rollupOptions.output.manualChunks來手動分割指定的包到指定的資料夾內，然後在網站入口檔案按照需求引入

比如：

    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            antd: ['@ant-design'],
            chart: ['echarts'],
            vue: ['vue', 'vue-router'],
          },
        },
      },
    },

透過這個配置可以把打出來的包的檔案進行二次分類，比如把antd的檔案或者圖示echarts的檔案分開成一個目錄，然後在網站入口檔案index.html裡透過link按需引入。

這樣可以優先載入指定的js檔案，對於一些特定場景，比如要首次載入要優先載入某某js檔案，這時候就派上用場了。

其實這個不侷限於vue專案，只要你的專案是vite構建的，都可以這麼玩。