Будет ли vite определенно заменять webpack?

Vite — это особенно инструмент сборки, используемый при выпуске Vue3.

Я считаю, что процесс поколения каждого вполне понятен, и теперь, теперь эта вита настолько хорошая, пусть особенно продвижение его.

что делает вите

Сначала мы знаем, чтоviteВ основном используется в качестве альтернативы в процессе разработки и выпуска.webpackрешение

Хотя производственная среда все еще проходитrollupЗапаковано, но в среде разработки для исправления используется собственный режим vite.webpackПроблема слишком долгого процесса упаковки зависимостей

Отсюда видно

vite — это инструмент сборки, основанный на среде разработки
На самом деле, vite не полностью заменяет webpack, а предпочитает оптимизированную версию webpack-dev-server.

Почему нельзя заменить webpack

По крайней мере, на данный момент у vite вообще нет возможности заменить webpack.Будь то с точки зрения сообщества или возможностей, сам vite все еще слишком хрупок, и его генерация и популярность полностью зависят от популярности самого vue.

Только представьте, какие проблемы нужно решить, если вы хотите перейти с вебпака на вайт?

Проблема с плагином

Для вите это плагин, а для вебпака это загрузчик

Давайте посмотрим, как Vite обрабатывает свои плагины.

// 简略几个插件
const resolvedPlugins = [
   ...(Array.isArray(configureServer) ? configureServer : [configureServer]),
   ...(transforms.length || Object.keys(vueCustomBlockTransforms).length
      ? [
          createServerTransformPlugin(
            transforms,
            vueCustomBlockTransforms,
            resolver
          )
        ]
      : []),
    assetPathPlugin,
    webWorkerPlugin,
    wasmPlugin,
    serveStaticPlugin
  ]
  resolvedPlugins.forEach((m) => m && m(context))

Глядя на этот код, нетрудно найти несколько проблем

Код Vite на стороне сервера основан на koa, и все его плагины основаны на этом фундаменте.Однако мы знаем, что плагин koa будет разделен на два этапа по следующему выполнению кода, что приведет к написанию нового плагина. подумайте о последствиях ваших плагинов до и после, а веб-пакет связан.После выполнения каждого загрузчика текущий источник передается обратно.
Любой, кто знаком с webpack, знает, что каждый загрузчик — это функция, что означает анализ файла, но если мы будем следовать текущей модели подключаемых модулей vite, каждый из наших подключаемых модулей может выполнять несколько функций.Например, если нам нужно достичь что-то типа Возможность webpack парсить scss файлы, то надо реализовать возможности sass-loader, css-loader, и style-loader в плагине, а потом возвращать файл после парсинга, что относительно бедно для повторное использование плагинов.
Бесполезные плагины все еще выполняются.Таким образом, даже если только один плагин анализирует файл, другие плагины все равно могут быть предварительно загружены.

плагин веб-пакета

После стольких лет использования веб-пакета его сообщество уже идеально, и большинство компаний разработает несколько пользовательских плагинов на основе веб-пакета.Если вы переходите на vite с нуля, это означает, что вам нужно реорганизовать плагины, которые вы написали ранее. .Одна поездка, и она может вообще не использоваться повторно, что приводит к дополнительным затратам на разработку или изменение всего нашего процесса сборки.Такой апгрейд не стоит потерь.

Более того, в сообществе веб-пакетов так много людей предоставили так много плагинов и загрузчиков, что я не думаю, что было бы хорошим решением напрямую использовать vite вместо webpack, но vite может стать будущим направлением развития.

Преимущества Вите

Как упоминалось выше, так много vite не может заменить содержимое веб-пакета, но vite определенно не такой невыносимый и не используется повторно.

Во-первых, исходя из теста среды разработки, мы знаем, что в webpack все больше и больше файлов, уровень зависимости становится все глубже и глубже, и каждая упаковка будет занимать больше времени, что сильно влияет на нашу эффективность при разработке, и иногда мы только модифицировать Невыносимо набирать копию хотя бы несколько минут, чтобы ее запаковать

Какая вита оптимизирует

Vite оптимизирован исходя из этого, он не будет запаковываться при запуске среды разработки, а позаимствовал у браузера es import

Давайте посмотрим, как импорт отображается в браузере.

<script type="module">
  import test from './test.js';
</script>

Когда мы используем тег сценария модуля типа в браузере, импорт внутри будет преобразован в запрос браузера.

Vite сделал серию материалов, основанных на этом, кратко описывающих процесс.

Используйте возможность браузера es import для перехвата текущего запроса
получить текущий файл
Анализировать соответствующие файлы в соответствии с различными типами файлов

Это несколько вещей, которые происходят, когда vite обращается к файлу.Через промежуточное программное обеспечение koa он анализирует различные типы файлов, генерирует исходный код и возвращает его в браузер для отображения.Вообще говоря, с точки зрения анализа файла , скорость очень высокая. Быстрая, поэтому при использовании vite будет трудно почувствовать, что он парсит и ждет. Это служба горячего обновления на миллисекундном уровне.

горячее обновление

Как упоминалось ранее, vite анализирует только измененные в данный момент файлы в процессе обновления, так как же он модифицирует файлы и изменяет изменения на странице

Прежде всего, когда приложение запускается, vite запускает две службы локально, одна из которых является внешней службой пути, а другая — внутренней службой разбора файлов, Эти две службы связаны с помощью веб-сокета.

Всякий раз, когда содержимое страницы изменяется, запускается мониторинг файлов серверной службы.Здесь мониторинг используетchokidarБиблиотека (можете посмотреть, если интересно)

Конкретный контент находится в подключаемом модуле hmr, который использует watch для внутреннего мониторинга файлов.serverPluginHmr.tsВниз

watcher.on('change', (file) => {
  if (!(file.endsWith('.vue') || isCSSRequest(file))) {
    // everything except plain .css are considered HMR dependencies.
    // plain css has its own HMR logic in ./serverPluginCss.ts.
    handleJSReload(file)
  }
})

Vue и css пишутся отдельно в соответствующих плагинах, и делают горячую обработку обновлений самостоятельно

После того, как обновление файла будет получено на стороне сервера, оно будет передано на сторону клиента, а затем обработано в соответствии с различными типами.

vue-reload
vue-rerender
style-update
style-remove
js-update
custom
full-reload

Обработка для vue заключается в непосредственном использовании метода обновления в vue3.0 для обновления компонентов.

Как продлить вайт

После приведенного выше заявления мы знаем, что горячее обновление Vite зависит от нескольких аспектов.

Длинное подключение вебсокета
компиляция промежуточного программного обеспечения koa

Зная эти два метода обработки, мы можем расширять vite слой за слоем, и нам нужно сделать всего несколько вещей.

Первым шагом является компиляция соответствующего типа файла на основе промежуточного программного обеспечения koa (вы можете использовать его после написанияconfigureServerДобавить плагины), сначала посмотрите как пишутся подобные плагины

import { ServerPlugin } from '.'
import { isImportRequest } from '../utils'

export const wasmPlugin: ServerPlugin = ({ app }) => {
  app.use((ctx, next) => {
    if (ctx.path.endsWith('.wasm') && isImportRequest(ctx)) {
      ctx.type = 'js'
      ctx.body = `export default (opts = {}) => {
        return WebAssembly.instantiateStreaming(fetch(${JSON.stringify(
          ctx.path
        )}), opts)
          .then(obj => obj.instance.exports)
      }`
      return
    }
    return next()
  })
}

Это плагин для обработки файлов wasm. Он в основном изменяет содержимое возвращаемого значения в зависимости от типа файла. Процесс посередине — это наш процесс компиляции.

Когда наш плагин написан, следующим шагом будет изменение содержимого файла, если файл отслеживается на стороне клиента.

Это то, что после запуска vite его main.js загружает кусок содержимого файла, а это значит, что согласноcreateHotContextМетод принимает информацию, возвращаемую websocket, и изменяет текущий компонент.

По этой логике мы можем добавить js-файл, использовать сокет для внутреннего подключения к серверной части, отслеживать отдачу нужного нам файла и делать соответствующую операцию

Это позволяет выполнить пользовательский, а не только Vite на основе vite.

конец

Vite это новая технология.Его сообщество процветает и различные типы плагинов еще не разработаны.Я думаю,что напрямую заменить webpack сейчас невозможно.Ведь webpack так долго используется.Основной контент и все привычки использования есть, но vite действительно силен и повышает эффективность разработки.Вы можете рассмотреть возможность использования vite в сочетании с webpack, или если вы привнесете идею vite в webpack, это может занять много времени.