Всем привет! В этой статье я хотел бы рассказать вам, как можно уменьшить размер javascript-файлов в несколько раз благодаря такому языку шаблонов, как hmpl.

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

Уменьшение размера файла javascript позволит страницам загружаться на клиенте быстрее. Если взять современные SPA, то окажется, что размеры файлов, даже с учетом всех минификаций, все равно довольно велики. Конечно, загрузив страницу один раз, на ней легче ориентироваться, но само время первой загрузки может составлять от одной секунды до, скажем, нескольких минут при плохом интернет-соединении. Мало кто из клиентов захочет ждать так долго.

При использовании большинства фреймворков и библиотек для создания пользовательского интерфейса вам приходится писать много шаблонного кода. Каждый символ занимает место в памяти. Давайте возьмем кликер Vue.js:

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `

        Click!
        
Clicks: {{ count }}
    
`,
}).mount("#app");

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

Даже без двух запятых могло быть на несколько байт меньше

Это проблема не только Vue, но и других фреймворков и библиотек, которые работают аналогичным образом. Но это не единственный момент. К ним идет огромное количество дополнительных модулей, и к ним идет столько же дополнительных модулей, и так до «бесконечности».

На самом деле одно из решений этой проблемы было предложено давно и оно тривиально простое — подготовить UI на сервере и просто загрузить его на клиенте. Благодаря этому размер файлов приложения можно существенно уменьшить. Именно эта идея используется в HMPL.

В примере я тоже попробую сделать кликер, но с использованием hmpl.js.

document.querySelector("#app").appendChild(
  hmpl.compile(
    `

        Click!
        
Clicks: {{ src: "/api/clicks", after: "click:button" }}
    
`
  )().response
);

Как видите, пользовательский интерфейс будет тот же, но размер файла будет немного меньше.

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

Как видно из примера, функционал расчета и хранения состояния приложения при желании можно перенести на сервер.

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

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

Большое спасибо всем за прочтение этой статьи!

Список материалов:

https://hmpl-lang.github.io/#/docs
https://vuejs.org/guide/quick-start.html