Как минимизировать Lit-HTML (включая комментарии)

Question

Я решил попробовать lit-html через:

npm install lit-html --save

Я много раз слышал (из разных источников), что lit-html имеет размер всего 2 или 3 КБ, но только из-за импорта html и экспорта рендеринга мой веб-пакет вырос более чем на 13 КБ. Это намного больше, чем ожидалось.

Кроме того, в последнем пакете dist это было встроено 7 раз:

/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
**/

Это немного чрезмерно.

Я думал, что webpack 4 должен был автоматически удалять комментарии. Как я могу добиться того, чтобы это было минимизировано со всем моим другим кодом (где комментарии автоматически удаляются, и все просто объединяются в одну строку)?

Я могу жить без лит-HTML, если это слишком навязчиво.

Answer 1

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

Зависимости только потому что?

Я слышал много раз (из разных источников), что размер lit-html составляет всего 2 или 3 КБ

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

Тот факт, что люди говорят, что одна библиотека или утилита небольшая, не должен автоматически переводиться в " тогда я включу ее ", особенно если ваше последнее утверждение:

Я могу жить без лит-HTML

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

Неправильно измеренный компромисс

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

Это включает в себя использование статического сжатия файлов, так что по умолчанию, импорт просто render а также html из lit-html будет производить пакет размером 3,5 Кбайт в минимизированном и сжатом виде.

Вот откуда берутся ваши цифры, даже если немного больше, чем в первом выпуске, где основы работали примерно в 2 КБ (минимизировано и сжато), lit-html уже дает достаточно сока из 3,5 КБ, что по размеру не имеет значения по сравнению с остальная часть всемирной паутины.

Ваш файл favicon.ico или запрос на его получение, содержащий все возможные файлы cookie, может уже содержать аналогичное, если не большее, количество байтов.

Вы уверены, что проблема Интернета или даже вашего сайта - библиотека, которая добавляет 3,5 КБ дополнительно?

Бюджет, ориентированный на мобильные устройства, предлагаемый крупными экспертами, составляет менее 170 КБ, сокращен и сжат, что примерно в 48 раз меньше, чем HTML, я думаю, что для вашей первоначальной логики достаточно места.

О критике лицензии

Кроме того, в последнем дистрибутиве это было встроено 7 раз:

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

Я думал, что webpack 4 должен был автоматически удалять комментарии.

Когда комментарии пишутся как /*! important */ они обычно сохраняются минифайерами, потому что автор исходного кода хотел оставить этот комментарий в.

Это распространенный метод хранения лицензий, но даже если есть инструменты, которые не будут заботиться о каких-либо комментариях, если не указано иначе, например, через --comments=/^!/ через uglify-js помните, что ваш сайт, приложение, проект, использующий программное обеспечение третьих сторон, должен так или иначе включать такую лицензию на программное обеспечение.

Я уверен, что вы не хотели дискредитировать команду Polymer или лицензию Google, но поскольку этот вопрос очень деликатный, я подумал, что было бы лучше быть уверенным, что мы все о них на одной странице.

Как минимизировать, в любом случае

Как я могу сделать так, чтобы это было минимизировано со всем моим другим кодом (где комментарии автоматически удаляются, и все просто объединяются в одну строку)?

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

Наиболее распространенным из них является UglifyJS. Известный как uglify-js модуль npm или uglify-es для кода ES2015+ он по умолчанию удаляет все комментарии.

Вы можете попробовать это через npx даже не устанавливая его:

npx uglify-es webpack/exported/lit-html.js

И увидите, что на выходе уже не будет комментариев.

Способ автоматизировать это - установить UglifyJS как devDependency и изменить файлы веб-пакета напрямую или через -o директива, как запись вашего package.json скрипт.

альтернативы

Интегрировать UglifyJS очень легко и в Webpack, и в Rollup, но, поскольку вы уже знаете Webpack, я предлагаю вам взглянуть на этот репозиторий, цель которого - показать, как объединить lit-html или hyperHTML.

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

Вы можете проверить в реальном времени, что когда-то минимизировано и сжато, включая код " Hello World ", lit-html весит 3,5 КБ в Webpack и 4,2 КБ в накопительном пакете, но после переноса с целым preset-env, что вы также можете настроить для штрафа Настройте свой комплект.

Как резюме

Даже если я являюсь автором основной библиотеки, которая конкурирует с lit-html, крайне нежелательно читать жалобы на библиотеки размером до 10 КБ, которые революционизируют способы разработки Интернета.

Любой другой основной фреймворк в 5-20 раз тяжелее, чем горит, или hyperHTML, и в Интернете возникают большие проблемы, чем у ~5K утилит, поэтому, пожалуйста, в следующий раз, когда вы увидите лицензию на интересующую вас библиотеку, а размер не имеет значения для всего, что в наши дни - это Интернет, не так-то просто стрелять в авторов библиотек или тех, кто просто соблюдает авторские права и лицензии библиотеки.

Благодарю вас.