1. Модульные инструменты
Модульность — это способ разложения сложных систем на более управляемые модули.
Может использоваться для сегментации, организации и упаковки приложений. Каждый модуль выполняет определенную подфункцию, и все модули собираются определенным образом, чтобы стать единым целым (bundle)
В области переднего плана не толькоwebpackЭто отличный инструмент для упаковки модулей, но есть и другие подобные инструменты, такие какRollup,Parcel,snowpack, и недавнее вниманиеVite
С помощью этих инструментов упаковки модулей мы можем повысить эффективность разработки и снизить затраты на разработку.
здесь не упоминаетсяgulp,gruntпотому что они определены только как инструменты сборки и не могут сравниваться
Rollup
RollupэтоES ModulesУпаковщик, с точки зрения функции,Rollupа такжеWebpackочень похожий. Но по сравнению сWebpack,Rollup значительно меньше
Сейчас с его помощью упакованы многие известные библиотеки, такие как:Vue,Reactа такжеthree.jsЖдать
Например:
// ./src/messages.js
export default {
hi: 'Hey Guys, I am zce~'
}
// ./src/logger.js
export const log = msg => {
console.log('---------- INFO ----------')
console.log(msg)
console.log('--------------------------')
}
export const error = msg => {
console.error('---------- ERROR ----------')
console.error(msg)
console.error('---------------------------')
}
// ./src/index.js
import { log } from './logger'
import messages from './messages'
log(messages.hi)
затем пройтиrollupупаковать
$ npx rollup ./src/index.js --file ./dist/bundle.js
Результат упаковки выглядит следующим образом
Как видите, код очень лаконичен и завершение не похоже наwebpackмного загрузочного кода и модульных функций
а такжеerrorТак как метод не используется, в результате нет выводаerrorметод, видно, чтоrollupНачать по умолчаниюTree-shakingоптимизировать вывод
Поэтому можно увидетьRollupПреимущества:
- Эффективность кода более лаконична и эффективна
- Tree-shaking поддерживается по умолчанию
Но недостатки тоже очень очевидны, загрузка других типов файлов ресурсов или поддержка импортаCommonJSмодуль или скомпилироватьESновые функции, эти дополнительные требованияRollup Необходимо использовать плагин для завершения
В итоге,rollupОн не подходит для разработки приложений, потому что необходимо использовать сторонние модули, а большинство сторонних модулей в настоящее время используютCommonJsспособ экспорта членов иrollupне поддерживаетсяHMR, что снижает эффективность разработки
но для упаковки JavaScriptВремя библиотеки,rollupСравниватьwebpackБольше преимуществ, потому что упакованный код меньше и быстрее, а на его недостатки можно не обращать внимания.
Parcel
Parcel — это интерфейсный упаковщик, не требующий настройки и обеспечивающий работу в "глупом стиле". Вам нужно только понимать простые команды для создания интерфейсных приложений.
Parcelа такжеWebpackОба поддерживают любой тип файла в качестве записи упаковки, но рекомендуется использоватьHTMLфайл как запись,HTMLФайл записывает код и ссылается на ресурсы, как обычно. Следующим образом:
<!-- ./src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parcel Tutorials</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
файл main.js черезES MoudleМетоды импортируют другие члены модуля
// ./src/main.js
import { log } from './logger'
log('hello parcel')
// ./src/logger.js
export const log = msg => {
console.log('---------- INFO ----------')
console.log(msg)
}
После запуска используйте команду для упаковки
npx parcel src/index.html
После выполнения командыParcelНе только запаковал приложение, но и запустил сервер разработки, после чегоwebpack Dev ServerТакой же
а такжеwebpackАналогично, также поддерживает горячую замену модуля, но использование проще
в то же время,ParcelЕсть очень полезная фича: поддержка автоматической установки зависимостей, напримерwebpackВнезапное использование и установка сторонней зависимости на этапе разработки неизбежно прекратится.dev serverЗатем установите и перезапустите. а такжеParcelизбегайте этого громоздкого рабочего процесса
в то же время,ParcelВозможность загрузки других типов файлов ресурсов с нулевой конфигурациейwebpackНастройте соответствующиеloader
Команда упаковки выглядит следующим образом:
npx parcel src/index.html
Поскольку процесс упаковки представляет собой несколько процессов, работающих одновременно, скорость сборки будет выше, чемWebpackБыстро, выходной файл также сжимается, а код стиля также извлекается отдельно в один файл
может чувствовать,Parcel Дайте разработчикам большую свободу, просто реализуйте бизнес-код и используйте его для других целей.Parcelрешить
Snowpack
Snowpack — это молниеносный интерфейсный инструмент сборки, созданный для современныхWebдизайн, более сложные инструменты упаковки (такие какWebpackилиParcel), с использованиемJavaScriptСобственная модульная система, которая позволяет избежать ненужной работы и обеспечивает плавный процесс разработки.
Во время этапа разработки каждый раз сохраняется один файл,Webpackа такжеParcelоба требуют пересборки и переупаковки всего приложенияbundle. а такжеSnowpackСоздайте один раз для каждого файла для вашего приложения, кэшируйте его постоянно, а когда файл изменится,Snowpackперестроит один файл
На рисунке ниже показаноwebpackа такжеsnowpackРазница в упаковке:
Не тратьте время на восстановление каждого изменения, просто обновите HMR в браузере.
Vite
vite, новый инструмент для разработки интерфейса, который может значительно улучшить опыт разработки интерфейса.
В основном состоит из двух частей:
- Сервер разработки, который предоставляет богатые встроенные функции на основе собственных модулей ES, таких как молниеносно быстрый [модуль горячего обновления HMR
- Набор инструкций по сборке, которые используют Rollup для упаковки вашего кода и предварительно настроены для вывода оптимизированных статических ресурсов для производственного использования.
Его действие аналогичноwebpack + webpack-dev-server, характеристики которого следующие:
- быстрый холодный пуск
- Мгновенное горячее обновление модуля
- Настоящая компиляция по запросу
viteСервер разработки будет запущен напрямую, и операция упаковки не требуется, а это означает, что нет необходимости анализировать зависимости модуля и нет необходимости компилировать, поэтому скорость запуска очень высокая.
Воспользуйтесь поддержкой современных браузеровES ModuleКогда браузер запрашивает модуль, он компилирует содержимое модуля по мере необходимости, что значительно сокращает время компиляции.
Схема показана ниже:
в тепловом модулеHMRС другой стороны, при изменении модуля вам нужно только попросить браузер повторно запросить модуль, нет необходимостиwebpackВ этом случае все соответствующие зависимые модули модуля необходимо скомпилировать один раз, что более эффективно.
webpack
По сравнению с вышеупомянутыми модульными инструментами,webpackБольшой и всеобъемлющий, многие часто используемые функции могут быть использованы из коробки. Есть две основные особенности:Все это модульа такженагрузка по требованию
По сравнению с другими инструментами сборки он имеет следующие преимущества:
- Интеллектуальный анализ: совместимость с синтаксисом CommonJS, AMD, ES6.
- Модуль «Все вещи»: поддержка упаковки файлов ресурсов, таких как js, css и изображения.
- Готово: HRM, Tree-shaking и многое другое
- Сегментация кода: код можно разделить на разные фрагменты, чтобы обеспечить загрузку по требованию и сократить время инициализации.
- Система подключаемых модулей с мощным интерфейсом подключаемых модулей для большей гибкости и расширяемости.
- Простота отладки: поддержка SourceUrls и SourceMaps
- Работает быстро: веб-пакет использует асинхронный ввод-вывод и имеет несколько уровней кэширования, что делает веб-пакет быстрым и намного быстрее при инкрементной компиляции.
- Хорошая экологическая среда: сообщество богаче, а возникающие проблемы легче решать