Полный цикл в digital

Принцип работы сборщика Webpack

Как правило, при разработке у нас получается много JavaScript файлов, содержащих различные кусочки кода. Это могут быть части нашего кода, либо сторонние библиотеки. Получается, что каждый такой файл мы должны подключить к HTML файлу через тег script.

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

Отдельные файлы представляют собой ES модули. Эти модули подключаются к другим файлам через команду import.

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

Проблема с кешем в браузерах

Браузер кеширует подключенные файлы стилей CSS, скриптов JavaScript и картинок. Кеширование означает, что подключенные файлы браузер скачивает только при первом заходе пользователя на сайт. При последующих заходах эти файлы уже не будут скачиваться опять, а возьмутся из кеша браузера.

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

Первое решение проблемы

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

Для борьбы с кешем, когда вы вносите изменения в ваш файл с кодом, вам нужно будет увеличить значение GET параметра на единицу. Смотрите пример применения подобного подхода:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles.css?v=1">
    <script src="script.js?v=1"></script>
  </head>
  <body>
  </body>
</html>

Второе решение проблемы

Существует и более продвинутый подход. Он заключается в том, что к именам файлов добавляются случайные строки, например, вот так:

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles.398db7afe3b52e94bb25.css">
    <script src="script.1d12c304c284a752cb9a.js"></script>
  </head>
  <body>
  </body>
</html>

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

Заполните форму уже сегодня!
Для начала сотрудничества необходимо заполнить заявку или заказать обратный звонок. В ответ получите коммерческое предложение, которое будет содержать индивидуальную стратегию с учетом требований и поставленных задач
Работаем по будням с 9:00 до 18:00. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 12:00.
Спасибо, ваш запрос принят и будет обработан!
Эйч Маркетинг