Что такое ParcelJs?

Parcel Js — это компилятор кода для нашего веб-сайта или приложения, который собирает весь наш код и создает новую коллекцию файлов, обычно в папке dist. С Parcel Js мы можем минимизировать наш JavaScript, CSS и HTML, изменять размер и оптимизировать изображения, хэшировать контент, автоматически разбивать код и многое другое.

Parcel против Webpack, Rollup и Browserfly

1. Исходная структура папок

2. Установка посылки

npm и посылка — save-dev

  • Мы используем флаг —save-dev или —D, чтобы установить его как зависимость разработки, поскольку это инструмент разработчика.
  • Настройка команды для запуска процесса компиляции. Добавляем в package.json

3. Подготовка кода

Нашей точкой входа будет файл index.html, так как это будет первый файл, который будет прочитан браузером. Таким же образом мы редактируем файл src/index.html и размещаем базовый HTML, набрав ! и нажав TAB, мы также добавляем h1 внутри тела:

Мы связываем файлы .js и .css, добавляя соответствующие теги HTML непосредственно перед расширением . Наш будет выглядеть примерно так:

3.1 Начните процесс сборки

Запустите процесс сборки с помощью npm run dev или любой команды, настроенной в файле package.json.

В итоге мы получим что-то вроде этого:

Добавляем стилей

И мы готовы создать наш первый сайт с Parcel JS.

4. Как оптимизировать изображения с помощью Parcel Js?

Мы добавляем изображения в наш index.html вместе с другими стилями.

мы получим это

В инструменте разработчика мы видим, что одно из наших изображений весит 114 КБ.

Если мы хотим оптимизировать наш веб-сайт, нам нужно преобразовать это изображение в такой формат, как webp, тогда мы делаем это

Мы вносим изменения в атрибут src изображений, добавляя «?as=webp».

Автоматически будет установлен новый пакет

Наконец, мы видим большое изменение размера изображений: от 114 КБ в одном из них до не более 53 КБ.

Но это не только там, если мы знаем размер, который мы хотим использовать в изображениях, мы можем добавить дополнительные параметры к вышеуказанному, как "&width=300&height=300", с этим изображения теперь будут иметь размеры, которые мы проходим, и мы получим меньший вес.

А если мы пойдем дальше и захотим ленивую загрузку?

Нам помогут известные пакеты, такие как Lozad.js или LazyLoad. В этом случае мы будем использовать Lozad.js, устанавливаем его: npm install --save lozad.

Поскольку нам нужно изменить атрибут src на data-src, нам нужно установить еще одну вещь: npm i -D parcel-transformer-html-datasrc, для этого нужно добавить дополнительную конфигурацию, мы создаем файл .parcelrc в корне нашего проекта, добавляя то, что показано ниже.

Поскольку теперь, если мы добавим какой-либо javascript для инициализации lozad.js, мы должны добавить атрибут module="true" в наш скрипт внутри head.

Lozad также нужен класс в наших изображениях lozad и, как уже было сказано, измените атрибут src на data-src.

Итак, у нас есть lazyload с нашими изображениями, оптимизированными с помощью Parcel JS.

Если вы дочитали до этого места, спасибо за чтение. Я добавил репозиторий со всем, что сделано в этом посте. Репозиторий