Перенос приложения с Webpack на Vite

Привет всем 👋

Недавно я перевел Stormkit с Webpack на Vite и хотел поделиться изменениями, потому что из-за отсутствия документации мне пришлось следовать методологии проб и ошибок.

Для тех, кто хочет увидеть непосредственно код, вот изменения.

Первое, что вы должны знать, это то, что Vite использует esbuild для разработки и rollup для производства. Поэтому, пока ваша среда разработки работает, ваша производственная сборка может не работать. Это действительно произошло со мной, и сейчас я объясню, почему это произошло.

Давайте посмотрим на параметры конфигурации, используемые в vite:

import { defineConfig } from "vite";

export default defineConfig(() => {
  return {
    // Although this is called root, 
    // in our case this is "src", 
    // where our application logic is located. 
    // All configuration options defined 
    // afterwards will be relative to this endpoint.
    root: "src",

    // This is where our assets are served from. 
    // In webpack, this was "output.publicPath".
    base: "/",

    // This is similar to Webpack's DefinePlugin. 
    // It is used to inject constants in your application.
    define: { 
        // Using the following configuration made our build fail as 
        // mentioned above. I had to change a couple of `global` usages 
        // and remove this configuration to make them work.
        // global: { }
    }

    server: {
      // We need https for various 3rd party tools used 
      // in local environment. It is similar to 
      // Webpack Dev Server's 'server: "https"' config.
      // We require a certificate for this to work and that is 
      // achieved through the 'basicSsl' plugin.
      // You can check the actual code to see which package is that.
      https: true,

      // We are proxying all requests from `/api` to our api server. 
      // This config is very similar to Webpack Dev Server's proxy config. 
      proxy: { }
    }
  },

  // This is almost equivalent to Webpack's "resolve" config. 
  // It is used to import files using aliases.
  resolve: { },

  // Assets under this folder will be copied to the dist folder. 
  // We used to achieve the same functionality using 
  // the "copy-webpack-plugin" package.
  // Do not forget that this is relative to the "root" path configured above.
  publicDir: "./public",

  // List of plugins used to make various technologies work.
  plugins: [
     // used to add https to local environment
     basicSsl(),
     // used to include our bundles inside the html file
     createHtmlPlugin({}),
     // used to import svgs
     svgr(),
     // used to make react work with vite
     react(),
  ],

  build: {
    // Specify the dist folder
    outDir: "../dist"
  },

  // Loading a file was failing and adding this configuration
  // fixed it. It basically replaces top-level "this" usage
  // with the "window" object.
  esbuild: {
    define: { 
      this: "window"
    }
  }
})
Войти в полноэкранный режим Выход из полноэкранного режима

Мы действительно используем Tailwind и Material UI в нашем проекте. Простой postcss.config.js — это все, что мне понадобилось, чтобы заставить Tailwind работать правильно:

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};
Вход в полноэкранный режим Выход из полноэкранного режима

Обоснование миграции

Это определенно не добавляет никакой прямой ценности для конечного пользователя. Так почему же мы перешли на новую версию?

Основная причина заключается в том, что в ближайшее время мы внесем много изменений во фронтенд, поскольку мы выпускаем V2 для Stormkit. Когда я понял, что HMR сломан, и услышал, что Vite очень быстр для разработки, я решил попробовать. Оказалось, что это было довольно хорошее решение, и оно также принесет пользу конечному пользователю, потому что увеличит скорость нашей разработки.

Результаты

  • Время сборки кажется немного медленнее, чем в нашей предыдущей конфигурации. Это в основном потому, что мы использовали esbuild, который является чрезвычайно быстрым, для производственных сборок, но vite использует rollup. Однако, если честно, учитывая увеличение HMR, мы готовы пожертвовать несколькими секундами во время производственных сборок.
  • В то время как HMR работает чрезвычайно быстро. Когда я вношу изменения в пользовательский интерфейс и переключаюсь в браузер для его визуализации, раньше я ждал несколько секунд, пока эти изменения распространятся. Теперь, когда я переключаюсь на вкладку браузера, изменения уже там. Это просто фантастика!

Надеюсь, этот мини-руководство было полезным для понимания того, что необходимо для перехода с Webpack на Vite. Stormkit можно считать большим приложением, и миграция была осуществлена с помощью 1 PR почти без ломающих изменений.

Примечание Эта статья также опубликована в нашем блоге.

Оцените статью
devanswers.ru
Добавить комментарий