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

Теперь, когда мы получили более глубокое представление о вашем пакете, мы можем поиграть с ним и попытаться уменьшить размер нашего упакованного кода. Следующий текст содержит мои советы и рекомендации о том, как найти виновника и уменьшить размер пакета, упакованного через Интернет.

Избыточные библиотеки

Я считаю, что это довольно простое правило. Просто найдите библиотеку, которую вы не используете. Вы, наверное, знаете, что веб-пакет довольно умен, используя инструмент под названием «tree shaking». Это означает, что если вы ссылаетесь на библиотеку в своем package.json, но не используете ее в своем коде, библиотека не будет добавлена ​​в окончательный комплект.

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

Недостаточно используемые библиотеки

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

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

Замените библиотеку своим кодом.

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

Я хотел бы отметить, что вышеупомянутый подход вызвал много разногласий. Это несколько противоречит известному принципу: «Не изобретайте велосипед». Поэтому в конце статьи я остановлюсь на нем подробнее.

Радикальный подход

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

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

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

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

Тщательно выбирайте то, что вы импортируете.

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

Давайте посмотрим на хороший пример - MaterialUI от Google. MaterialUI - это большая библиотека компонентов.

Предположим, у вас есть следующее объявление:

import { Button, TextField } from "@material-ui/core";

И вы будете работать только с Button - TextField будет автоматически опущено.

Как вы можете видеть здесь:

Всего 33,29 КБ MaterialUI.

Даже если вы напишете такой код:

import * as all from {component}

Он просто выполнит физический импорт тех компонентов, которые вы включили в свой код. Вы использовали none? Тогда в вашем пакете не будет никаких признаков MaterialUI.

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

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

Спутниковые библиотеки.

Иногда библиотеки npm содержат «wingmen». MomentJS стал печально известным тем, что включает в себя большую часть библиотек локализации. Если вам не нужны эти библиотеки, не включайте их в комплект.

Чтобы удалить эти ненужные зависимости, обратитесь к статье:

Https://www.tutorialspoint.com/how-to-prevent-moment-js-from-loading-locales-with-webpack

Пожалуйста, примите это во внимание и убедитесь, что вы используете только ту часть пакета NPM, которая вам действительно нужна. Эти ведомые - регулярно огромные библиотеки.

Разделение кода

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

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

Замечание - использование библиотек вместо собственного кода.

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

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

С одной стороны, такой подход кажется вполне логичным и убедительным. Но помните ли вы проблему с PadLeft? Если вы еще не слышали об этом, прочтите замечательную статью ниже с действительно понятным названием. :)

«Как один разработчик сломал Node, Babel и тысячи проектов в 11 строках JavaScript».

Https://www.theregister.com/2016/03/23/npm_left_pad_chaos/ (

К сожалению, мы, как сообщество, еще не стали просвещенными.

В связи с случаем «PadLeft» я был действительно поражен, когда обнаружил библиотеку «IsEven».

Только в прошлом месяце я наткнулся на эту библиотеку. Он сообщает вам, четное ли число. Как все мы, вероятно, знаем, достаточно написать одну строку кода, используя базовую арифметическую операцию, чтобы проверить, четно ли конкретное число или нет.

Но это еще не конец. Модуль NPM имеет дополнительную зависимость от библиотеки под названием IsOdd, и, более того, он также относится к библиотеке под названием IsNumber.

Несомненно, эти библиотеки предназначены для шутки. Однако, честно говоря, это превратилось в довольно злую шутку, потому что на данный момент загружен ОДИН МИЛЛИОН пакетов. Ясно, что большое количество людей НЕ поняли эту шутку и попали в ловушку. :) Я подозреваю, что вы редко встретите принцип, доведенный до таких крайностей, как в этом конкретном примере. Автор библиотеки должен был включить заявление об отказе от ответственности.

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