Перевод: Gaurav Behere — Time to say goodbye to Webpack?
Прежде чем мы ответим на главный вопрос, давайте посмотрим, почему мы вообще его рассматриваем.
Если вы посмотрите на данные bestofJS за 2021 год, вы увидите, что восходящей звездой в категории инструментов сборки является Vite, оставивший Webpack далеко позади с точки зрения популярности.
Посмотреть на эту статистику можно здесь: 2021 JavaScript Rising Stars
Vite (французское слово, означающее «быстрый», произносится как /vit/, как и «veet») — это инструмент для сборки, цель которого — обеспечить более быструю и экономичную разработку (development) современных веб-проектов.
Обратите внимание на акцент на слово разработка (development
). Vite не обещает многократную оптимизацию или более лучший результат для производственной сборки. Так что не ожидайте, что ваша производственная сборка будет оптимизирована или резко уменьшится размер пакета, который вы создаете.
Он состоит из двух основных частей:
Vite имеет модульную конструкцию и поставляется с разумными настройками по умолчанию из коробки, но также обладает широкими возможностями расширения с помощью API-интерфейсов подключаемых модулей и API-интерфейсов JavaScript с полной поддержкой ввода.
Мы уже давно не пишем код JS модульным способом, особенно после модулей ES6. Поскольку не многие браузеры изначально позволяли использовать загрузку модулей ES6, у нас есть концепция объединения нашего кода с использованием инструментов, которые сканируют, обрабатывают и объединяют наши исходные модули в один файл.
Такие инструменты, как Webpack, package и rollup, выполняют ту же работу.
Когда вы начинаете проект, размер и количество модулей JS могут показаться меньшей проблемой, но по мере того, как вы пишете больше кода, проект растет, и вы видите, что запуск сервера разработки занимает много времени.
Поскольку он должен транспилировать код и объединять код таким образом, чтобы его можно было загрузить в браузере. Вест этот медленный процесс может сильно повлиять на продуктивность и удовлетворенность разработчиков.
Vite стремится решить эти проблемы, используя новые достижения в экосистеме: доступность собственных модулей ES в браузере и рост числа инструментов JavaScript, написанных на нативных языках компиляции.
Vite разделяет пакеты на две части:
Здесь Vite предполагает, что во время разработки на локальном компьютере у вас будут последние версии браузеров, которые изначально поддерживают загрузку модулей ES6.
Пример работы традиционных сборщиков, таких как wepack
Пример работы Vite
Можно начать с минимальной установкой vite в dev зависимости
"devDependencies": { "@vitejs/plugin-react": "^1.1.4", "vite": "^2.7.10" }
Далее создать очень простой файл конфигурации vite.config.js
import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()] });
Далее можно использовать две простые команды для запуска сервера разработки и создания рабочей сборки:
vite и vite build соответственно.
Vite ищет index.html в корневом каталоге, откуда ему нужно загрузить модуль root/index вашего кода
index.html
<!DOCTYPE html> <html> <head></head> <body> <div id="root"></div> <script type="module" src="./index.jsx"></script> </body> </html>
index.jsx
import React from 'react'; import ReactDOM from 'react-dom' import App from './src/app';ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.querySelector('#root') );
src/app.jsx
import React from 'react';const App = () => { return <> <div>Hello There</div> <div>Time right now: {new Date().toTimeString()}</div> </> } export default App;
Без сборки кода сервер запускается за доли секунды
Если вы посмотрите, как модули ES загружаются в браузере, обратите внимание, что app.jsx загружается как собственный модуль ES.
Разработчики должны получать немедленную обратную связь об изменениях, внесенных в код. Вы не можете ждать, пока снова произойдет полное объединение, и сервер перезагрузит страницу, которая нарушит текущее состояние.
Вот почему некоторые сборщики поддерживают горячую замену модуля (HMR), позволяя модулю «горячую замену» себя, не затрагивая остальную часть страницы. Опять же, по мере роста проекта HMR также занимает много времени, что может понизить производительность.
Vite имеет преимущество перед другими инструментами сборки, выполняя HMR лучше по сравнению с собственным ESM. Когда файл редактируется, Vite нужно только точно аннулировать (сбросить) цепочку между редактируемым модулем и его ближайшей границей HMR (в большинстве случаев только сам модуль), что делает обновления HMR постоянно быстрыми независимо от размера вашего приложения.
Vite также использует заголовки HTTP для ускорения полной перезагрузки страницы. Запросы модулей исходного кода реализуются с помощью 304 Not Modified, а запросы модулей зависимостей строго кэшируются с помощью Cache-Control: max-age=31536000, неизменяемые, поэтому после кэширования они не попадают на сервер снова.
Vite также предварительно настроен для обработки вашей сборки как универсального приложения. Vite может предварительно отображать HTML-страницы, поэтому поисковые роботы могут извлекать содержимое вашей страницы без выполнения js.
Подробнее https://vitejs.dev/guide/ssr.html
Возвращаясь к вопросу, с которого мы начали. Со всеми перечисленными выше преимуществами переход на Vite кажется многообещающим.
То, что дает вам множество более простых API с большой абстракцией и мнением, часто сложно настроить.
Исходя из этого принципа, если вы используете очень специфические конфигурации Webpack со сложными конфигурационными файлами, то вам не стоит сразу переходить на Vite. Если вы используете Webpack с базовыми конфигурациями, то вам возможно следует перейти на Vite для убыстрение процесса разработки.
Если я начну новый проект, то обязательно буду использовать Vite.
Спасибо за чтение. Если вы перенесли крупномасштабный проект с Webpack на Vite, поделитесь своим опытом. Будет здорово перенять ваш опыт. Gaurav Behere
Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…
Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»! Этот выпуск включает в…
Vue.js — это универсальный и адаптируемый фреймворк. Благодаря своей отличительной архитектуре и системе реактивности Vue…
Недавно, у меня истек сертификат и пришлось заказывать новый и затем устанавливать на хостинг с…
Каким бы ни было ваше мнение о JavaScript, но всем известно, что работа с датами…
Все, кто следит за последними событиями в мире адаптивного дизайна, согласятся, что введение контейнерных запросов…
View Comments
Всегда нравился fuse-box, но такое ощущение, что про него кроме меня никто не слышал
есть такое =)
А что там вообще с typescript?
Да все не плохо