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

Статус

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

Минификация

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

var array = [];
for (var i = 0; i < 20; i++) {
var j = Math.random()*i/100
  array.push(j)
}

Сокращая это с помощью https://jscompress.com (который использует UglifyJS 3 и babel-minify), мы получаем сжатие 32%, экономя 0,03 КБ и следующий, гораздо более компактный код:

for(var j,array=[],i=0;20>i;i++)j=Math.random()*i/100,array.push(j);

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

Самоязычная транспиляция

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

Вместо этого мы хотим упростить сложные уравнения (например, Pythons sympy символьный движок может помочь переписать уравнение в менее вычислительно трудоемкое), или мы можем переименовать длинные переменные в более короткие, чтобы облегчить процесс минификации.

Здесь в игру вступает компилятор закрытия Google.

Компилятор Google Closure

Это компилятор javascript, который компактно и более эффективно переписывает и минимизирует существующий код. В отличие от обычной компиляции, закрывающий компилятор не преобразует javascript в машинный код, а, скорее, в лучшую версию самого себя.

Установка

Его установка проста и может быть выполнена через node.js.

npm i google-closure-compiler

Бег

Точно так же управление им также довольно интуитивно понятно. Файлы Javascript поставляются с флагом --js (в этом случае я использую подстановочный знак * для выбора всех файлов .js), и они обрабатываются в один выходной файл (compiled.js), который можно импортировать вместо них.

npx google-closure-compiler --js=*.js --js_output_file=compiled.js

ПРИМЕЧАНИЕ: если требуется порядок файлов, вы можете обойти это, последовательно загружая все файлы с помощью нескольких --js= флагов.

Так что же делает компилятор Closure?

Как и следовало ожидать от Google, здесь используется множество инструментов и приемов для улучшения кода. Самый простой из них рассматривает длинные имена переменных и сокращает их:

function hello(longName) {
  alert('Hello, ' + longName);
}
hello('New User');

изменяется на:

function hello(a){alert("Hello, "+a)}hello("New User");

Дополнительные параметры могут еще больше упростить код, так как он анализирует код для удаления мертвых (неиспользуемых) функций и проверяет синтаксис. Пример этого приведен в документации, где следующие функции:

function unusedFunction(note) {
  alert(note['text']);
}

function displayNoteTitle(note) {
  alert(note['title']);
}

var flowerNote = {};
flowerNote['title'] = "Flowers";
displayNoteTitle(flowerNote);

упрощены до:

function unusedFunction(a){alert(a.text)}function displayNoteTitle(a){alert(a.title)}var flowerNote={};flowerNote.title="Flowers";displayNoteTitle(flowerNote);

который затем сводится к:

var a={};a.title="Flowers";alert(a.title);

Вывод

Компилятор закрытия Googles не только минимизирует код javascript, но также может снизить его сложность. Статические уравнения, такие как var x = 17 + 2 , переписываются (var x=42), чтобы избежать ненужных вычислений во время выполнения, а код ECMAScript 6 может быть преобразован в ECMAScript 3 - так, чтобы он работал в старых браузерах. «Компилятор» прост в использовании и значительно сокращает объем работы, выполняемой браузером.

Полезные ссылки