親身體驗了一把vite，感覺真的沒有說的那麼好，很多坑

寒水寺一禪發表於2021-12-03
Vite

1、有話要說

本來專案中用的是webpack，我想著把專案構建成vite，就可以提升工作效率，但是誰知。各種各樣的坑，所以我覺得還是簡單的寫下來

2、require

眾所周知require是webpack中的語法。
如果你想動態請求一個靜態資源路徑，你可以這樣

computed: {
    getUrl() {
      return require("@/assets/images/" + this.src);
    }
}

但是在vite中，不是，它不識別require，而是要使用 new URL()
在專案中坑的是new URL中竟然不只是@別名符，你只能用相對路徑

 computed: {
    getUrl() {
      return new URL(`../../assets/images/${this.src}`, import.meta.url).href;
    }
},

因為一旦使用 @方式，在開發時正常，那麼你編譯後，就會報錯。根本找不到路徑。

2、process

process也用不了，
比如你專案中用了
process.env.NODE_ENV
那麼只能替換為
import.meta.env.MODE

3、webpack.ProvidePlugin

vite中不支援webpack中提前注入的方式。

比如你專案中很多地方都要用

import moment from 'moment';
import _ from 'lodash';
import mathjs from 'mathjs';
import jquery from 'jquery';

你要在每個用到的元件中，都要引入。很煩很煩。
所以webpack就提供了一個外掛ProvidePlugin，可以讓你提前就一次性注入，之後在頁面中直接使用，無需再引入
image.png

然而，然而，這麼重要的功能，vite竟然不支援。

4、webpackChunkName

無法在路由中通過webpackChunkName進行程式碼分割。
image.png

導致在路由中引入的元件，編譯後，會全部散落在static下的js資料夾下。很多很多。

5、啟動很慢

image.png

我看到這裡，以為頁面已經秒開了。但是開啟頁面才發現。一致loading中，沒有任何反應
image.png
回過頭再看控制檯
image.png
竟然是慢悠悠的載入依賴。

此時我發現，我的node_modules下多出來了一個.vite資料夾
image.png

開啟一看，嚇我一跳。多出來了這麼多資料夾
image.png

前幾個大於1000k的檔案，合起來有30M大。而整個.vite資料夾，足足有40M
image.png

然後，進去頁面，開啟瀏覽器 network
image.png

算了，不截圖了，太多了，
image.png
269個請求。。。。。。。。。

震驚

當我登入之後，切換路由，它又去載入了172個請求。這幾乎是webpack的4倍多

image.png
而webpack才19次，因為我通過webpackChunkName將這個路由的檔案全放到chunk-dataSource.js這一個檔案中了
image.png

6、編譯

這是我vite.config.js配置

build: {
    target: 'modules',
    outDir: resolve(__dirname, `dist/${entryPath}`), //相對於root而言
    assetsDir: 'assets', //相對於build.outDir而言
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    minify: 'esbuild',
    sourcemap: false,
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'),
      },
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      },
    },
    // chunk 大小警告的限制
    chunkSizeWarningLimit: 500,
  },

由於我使用到了中國地圖，所以把geoJSON放到本地了，結果它直接報錯。編譯不通過。
提示記憶體溢位。

費了我好大勁才找出來是geoJSON導致的問題。

其次是程式碼分割。
image.png

css散落一地
image.png

js也散落一地
image.png

本想通過rollup自帶的manualChunks來手動分割

build: {
    target: 'modules',
    outDir: resolve(__dirname, `dist/${entryPath}`), //相對於root而言
    assetsDir: 'assets', //相對於build.outDir而言
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    minify: 'esbuild',
    sourcemap: false,
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'),
      },
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js', //chunkFileNames會採用rollup內部自動分割，可以使用manualChunks明確指定分割。
        entryFileNames: 'static/js/[name].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id, { getModuleInfo }) {
          if (id.includes('node_modules')) {
            return 'vendor'; //程式碼分割為第三方包
          }
          if (id.includes('views/pre-login')) {
            return 'pre-login'; //程式碼分割為資料來源
          }
          if (id.includes('views/home')) {
            return 'home'; //程式碼分割為資料來源
          }
          if (id.includes('views/settings')) {
            return 'settings'; //程式碼分割為資料來源
          }
        },
      },
    },
    // chunk 大小警告的限制
    chunkSizeWarningLimit: 500,
  },

沒承想，編譯完後，用vite preview預上線去預覽頁面，報錯了
image.png

我開發環境好好地，一編譯，M is not a function

這還怎麼玩,啥也不是，老老實實換回webpack吧

相關文章