Что такое 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.
Если вы дочитали до этого места, спасибо за чтение. Я добавил репозиторий со всем, что сделано в этом посте. Репозиторий