Сочетание vite и реакции

React.js

vite, французское слово, означающее быстро. Произносится как /vit/

Давайте посмотрим на предыдущих первопроходцев: посылки, роллапы, веб-пакеты. Цель этих инструментов — упаковать, чтобы внешний интерфейс был модульным. Чтобы внешний интерфейс выполнял более сложную логику, чтобы на него не смотрели свысока back end Чтобы доказать, что js — это вселенная Первый язык, для.... Кратко резюмируя:

  1. элемент конфигурации
    • Parcel самый удобный и почти не требует настройки, только сборка после установки.
    • И webpack, и rollup должны указывать вход, выход, загрузчики, плагины, преобразования и т. д. - Он основан на модульной системе узла, поэтому накопительный пакет может напрямую использовать импорт/вывод, поэтому использование накопительного пакета должно быть в версии 10 или выше, а веб-пакет не может
    • webpack должен использовать абсолютные пути, поэтому накопительный пакет path.resolve может использовать относительные пути.
  2. tree-shaking
    • Parcel поддерживает встряхивание дерева как commonjs, так и es6, что является большим преимуществом, потому что на npm есть много библиотек commonjs, а парцелла выполняется параллельно во время встряхивания дерева, что позволяет в полной мере использовать преимущества нескольких ядер.
    • накопительный пакет статически анализирует импортированный код, автоматически исключает неимпортированные части и имеет меньшую конфигурацию.
    • Конфигурация веб-пакета более сложная, и необходимо использовать синтаксис es6.Webpack4 по умолчанию включает встряхивание дерева в производственной среде, в противном случае необходимо настроить плагин uglifyPlugin.
  3. код-сплит
    • webpack предпочтительнее, набор настроек, может обеспечить более точное управление, см.Официальный пример
    • накопительный пакет использует встроенную в браузер систему модулей ES и управляется браузером.
    • Parcel поддерживает сегментацию кода с нулевой конфигурацией с помощью динамического синтаксиса импорта.import()для этого функция возвращаетpromise
    • Последние два имеют больше проблем и отчетов об ошибках, поэтому из соображений безопасности веб-пакет более безопасен, а веб-пакет быстрее всего компилируется.
  4. живая перезагрузка
    • Излишне говорить, что это необходимая функция для разработки интерфейса.Если изменение кода требует от меня нажатия кнопки обновления, считается, что моя команда + R будет нажата.
    • У Parcel есть собственный сервер разработки, но он подвержен проблемам при использовании перехватчиков журналов HTTP и промежуточного программного обеспечения.
    • необходимо установить накопительный пакетrollup-plugin-serverа такжеrollup-plugin-livereload
    • webpack просто нужно установитьwebpack-dev-serverВот и все, с точки зрения настройки (хуки конфигурации, промежуточное программное обеспечение), веб-пакет сокрушает два других
  5. HMR
    • Это тоже незаменимо для разработки, особенно когда front-end бизнес становится все тяжелее и тяжелее, и мучительно каждый раз возвращаться на домашнюю страницу и кликать заново (о важности первого экранного времени), особенно при смене CSS (измените размер шрифта, который вы указали, я пролистнул всю страницу ??)
    • Просто настройте веб-пакет и добавьте module.accept там, где требуется горячее обновление.По сравнению с двумя другими, он более зрелый и имеет большую степень свободы.
    • Parcel снова имеет встроенный механизм горячего обновления
    • требуется сведениеrollup-plugin-hotreloadплагин
  6. Преобразование модуля
    • Преобразование формата, отличного от js, в формат js (упаковщик распознает только js)
    • webpack — это набор конфигураций загрузчика
    • Еще раз посылка предоставляет встроенные преобразования и переводы для распространенных форматов, не нужно настраивать и устанавливать плагины.

В заключение Если это демонстрация или функциональность предсказуемо проста (не то, что заявлено в продукте), используйте посылки. Если это библиотека, импортированная минимальной третьей стороной, используйте накопительный пакет Используйте веб-пакет для остальных

Сказал много бесполезного

В передней части всегда создается больше и больше колес, что очень хорошо, сто цветов расцветают, сто школ мысли соревнуются, сто спорят галопов, и сотня вещей следует.В 0.0 я сосредоточился на упоминании об этом. Так как колеса все передо мной, я все еще даю ему вихрь.

Сначала посмотрите описание vite и используйте его в среде разработки.родной ЭСМ, используется в производственной средеRollupПакетный инструмент для веб-разработки Естественно наследовать преимущества обоих:

  1. Преимущества Эсм

    • Мгновенная замена горячего модуля (HMR)

  2. Преимущества накопительного пакета

    • Компилировать по запросу, см. предыдущий раздел для получения дополнительных сведений

esm реализован на основе браузеров.Конечно, стандарт был предложен в ES6.Чтобы узнать о совместимости, обратитесь кmdn, вот лишь несколько кратких моментов:

  1. Экспорт собственных модулей и ссылки на них

test.mjs

export const test = () => {
    console.log('test')
}

index.js

import { test } from "./test.mjs";
test()

index.html

<script src="./index.js" type="module"></script>

Вышеприведенный код не требует прохождения через Babel или Webpack, его можно запустить и распечатать непосредственно в браузере.test

  1. Может экспортировать функции, var, const, let, классы
  2. mjsа такжеjsДа, но mdn официально рекомендует сначала использовать js, потому что на многих серверахcontent-typeне знаюmjs, вызовет ошибку синтаксического анализа. Поэтому продолжайте использоватьjsТолько что
  3. Динамическая загрузка модулей для ленивой загрузки
btn.addEventListener('click', () => {
    import('./someDynamicModule').then(module => {
        // handleModule
    })
})

Сравнение с вебпаком:

  1. Vite не запакован на этапе разработки, а синтаксис импорта ES в исходниках реализован прямо из браузера.Браузер пропускает вышеуказанные<script type="module">Для их создания каждый импорт представляет собой HTTP-запрос.
  2. Среда разработки должна перехватывать и преобразовывать форматы, которые браузеры не могут разобрать, такие как *.vue, *.jsx и т. д. Это эквивалентно загрузчику webpack, но только функция загрузчика , остальные не участвуют
  3. В производственной среде Vite по-прежнему использует пакет, но использует более легкий накопительный пакет вместо веб-пакета.

Какая польза от этого?

  1. Нет необходимости упаковывать, так что холодный запуск быстрый
  2. Компиляция кода по запросу, естественное встряхивание дерева и отложенная загрузка
  3. HMR отделен от количества зависимостей, которые зависят от всего модуля, поэтому скорость HMR не уменьшится из-за увеличения приложения,

Третий момент, который я хочу подчеркнуть, заключается в том, что причина, по которой HMR веб-пакета должен устанавливать module.accept, заключается в том, чтобы надеяться, что разработчики смогут использовать его там, где действительно необходимы горячие обновления, потому что после его мониторинга он будет отслеживать этот модуль и все связанные с ним зависимости. с этим модулем. изменения, это более ресурсоемко, и как только изменение будет найдено, весь модуль и связанные модули будут перекомпилированы один раз. Так вы говорите, что это требует много времени и производительности? Если вы можете отслеживать и перекомпилировать каждый отдельный модуль Compile, разве это не приятно?

Хотя и не без недостатков

  1. Это будет медленнее, чем веб-пакет, когда вся веб-страница перезагружается, потому что она основана на нативном es и ее нужно пройти, чтобы<script type="module">При отправке сетевого запроса, а в этом модуле могут быть и другие модули, вы должны продолжать отправлять сетевые запросы.Однако не является неприемлемым использование кеша после первого раза, и вы также можете выбрать его использование в среда разработки Используйте накопительный пакет для упаковки.

Давайте посмотрим на реальный бой. Из-за эксклюзивного периода Vue проект Vue легко интегрируется, но я больше склоняюсь к реакции в своей работе. Следующий код представляет собой комбинацию с реакцией.

  1. Новый проектyarn init -y
  2. Установить зависимостиyarn add @pika/react @pika/react-dom vite@pika — это префикс модуля esm, который является формой модуля esm для реакции и реакции-дома.
  3. Добавить конфигурацию поддержки реагирования vite.config.js
module.exports = {
    jsx: 'react',
    plugins: [require('vite-plugin-react')]
}
  1. Создание корневого каталога проектаindex.html, следующим образом
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>
</html>
  1. новыйsrc/main.tsx, следующим образом
import React from 'react'
import style from './index.module.scss'
export default function() {
    const [count, setCount] = React.useState(1)
    return (
        <div>
            hello world
            <button className={style.button} onClick={() => setCount(count + 1)}>
                count: {count}
            </button>
        </div>
    )
}
  1. Модуляризация и препроцессоры для css На самом деле vite рекомендует использовать нативные переменные css, потому что они ориентированы на современные браузеры.Если вам нужно использовать препроцессор, вы можете. Есть три варианта, см.эта статья,решил использовать схему генерации д.ц,так как в ней могут быть кодовые подсказки,что более ароматно.Поэтому решил установитьtyped-scss-modulesтак же какsass, добавить"tsm": "tsm src -w"Здесь следует отметить, что используется введение модуляризации, т.е.import style from 'xxx.scss'Необходимо следовать соглашению об именах в Vue, вам нужно добавить суффикс модуля, то есть он должен быть назван какxxx.module.scss

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

Прикрепить весь проектадрес

Категории