Коды, разделяемые с помощью Parcel Web App Bundler

Коды, разделяемые с помощью Parcel Web App Bundler

От автора: разделяемые коды!! Очень модное выражение в современной разработке. Сегодня мы узнаем, что это такое, а также узнаем, как очень легко разбивать код через parcel.

 

Что такое разбиение кода?

Если вы уже знаете, можете пропустить эту часть. Других же приглашаю читать дальше…

Если вы закончили front end разработку в любом JS фреймворке, вы наверняка упаковали все свои модули в один большой JS файл, который прикрепили к веб-странице. Но стоп, этот файл же очень большой! Вы написали свое замечательное (и сложное) веб-приложение, в нем так много частей… пакеты должны быть огромными. И чем больше они, тем дольше они загружаются на медленных сетях. Спросите себя, нужен ли пользователю весь этот функционал сразу же?

Представьте одностраничное E-Commerce приложение. Пользователь авторизуется, чтобы посмотреть список товаров. Может, он зашел просто посмотреть товары, но он вынужден тратить время и данные не только на загрузку JS для рендера списка товаров, но и JS для рендера страниц о нас, фильтров, деталей товара, заказов… и т.д. и т.п.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Это несправедливо по отношению к пользователям!! Было бы круто, если бы мы могли давать пользователям необходимое только тогда, когда это требуется.

Эта идея разбиения большого пакета на множество маленьких и называется разбиением кода. Эти маленькие пакеты загружаются асинхронно по требованию. Звучит очень сложно, но современные менеджеры пакетов типа Webpack упрощают процесс. Parcel делает все еще проще.

Коды, разделяемые с помощью Parcel Web App Bundler

Что такое этот новый Parcel?

Parcel – это «Ослепительно быстрый упаковщик веб-приложений без настроек».

Он очень сильно упрощает создание модулей!! Если еще не слышали, рекомендую эту статью от Indrek Lasn.

Давайте разделять!

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

npm init

Или

yarn init

Выберите любую команду (мне нравится yarn) и создайте файлы ниже.

Коды, разделяемые с помощью Parcel Web App Bundler

Идея в том, что мы будем загружать только контент index.js в файл index.html и по событию (у нас это будет нажатие кнопки) будем загружать someModule.js и рендерить с его помощью контент.

Откройте index.html и вставьте в него код ниже.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
<!DOCTYPE html>
<html lang="en">
  <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Code Splitting like Humans</title>
  </head>
  <body>
 <button id="bt">Click</button>
 <div class="holder"></div>
 <script src="./index.js"></script>
  </body>
</html>

Ничего особенного, обычный HTML шаблон с кнопкой и div, в котором мы будем рендерить контент из someModule.js. Напишем код модуля someModule:

console.log("someModule.js loaded");
module.exports = {
  render : function(element){
 element.innerHTML = "You clicked a button";
  }
}

Мы экспортируем объект с функцией render, которая принимает элемент и задает ему свойство innerHTML в текст «You clicked a button».

А теперь магия. В файле index.js необходимо обработать клик кнопки и динамически загрузить someModule.

Для динамической асинхронной загрузки будем использовать синтаксис функции import(). Эта функция асинхронно загружает модуль по требованию. Как использовать:

import('./path/to/module').then(function(page){
//Do Something
});

Import асинхронная функция, поэтому она возвращает promise, который мы обрабатываем через then. В then мы передаем функцию, принимающую объект, загруженный из модуля. Похоже на const page = require(‘./path/to/module’);, только динамически и асинхронно. В нашем случае:

import('./someModule').then(function (page) {
 page.render(document.querySelector(".holder"));
});

Мы загружаем someModule и вызываем его функцию render. Давайте подключим это к обработчику события нажатия кнопки.

console.log("index.js loaded");
window.onload = function(){
 document.querySelector("#bt").addEventListener('click',function(evt){
 console.log("Button Clicked");
 import('./someModule').then(function (page) {
 page.render(document.querySelector(".holder"));
 });
});
}

Весь код написан, давайте запустим parcel. Parcel автоматически обработает все настройки!

parcel index.html

Он создаст эти файлы.

Коды, разделяемые с помощью Parcel Web App Bundler

Откройте в браузере и посмотрите.

Коды, разделяемые с помощью Parcel Web App Bundler

Коды, разделяемые с помощью Parcel Web App Bundler

Посмотрите в консоль, someModule загружается только после клика на кнопку. На вкладке network модуль загружается через codesplit-parcel.js после вызова функции import. Разбиение кода – это что-то удивительное. Если это так легко, нет смысла его не применять.

Автор: Ankush Chatterjee

Источник: https://hackernoon.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree