javascript - 如何缩小Lit-HTML(包括注释)

Question

我决定通过以下方法尝试使用lit-html：

npm install lit-html --save

我无数次（从各种来源获悉），lit-html的大小仅为2或3KB，但是仅导入html并进行导出，就使我的webpack增长了13KB以上。这比预期的要大得多。

此外，最终的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应该自动删除注释。我如何才能将其与其他所有代码紧密地最小化（其中注释会自动删除，而所有内容都将放在一行中）？

我可以不用lit-html来生活，如果它太麻烦了。

Answer 1

这个问题很好地总结了当今Web开发中存在的问题，因此，我决定以这个答案作为重点，并提供回答OP的所有子问题所需的各种详细信息。

依赖仅仅是因为？


  我无数次（从各种来源获悉）lit-html的大小仅为2或3KB


为了在软件中产生最佳结果，我们通常会决定包括一些依赖项，因为它的功能，它为我们解决的问题以及最终的程度。

人们说一个库或实用程序很小，所以不应自动将其翻译为“然后我将其包括在内”，特别是当您的最后一条语句是：


  我可以没有lit-html


由于我对您的问题并没有太多的努力或热情，也不想使用lit-html，因此您确定甚至需要它吗？

错误衡量的权衡

当我们谈论“ Web事物”时，我们通常谈论生产代码以及用于获取此类生产代码的所有常识性技术和最佳实践。

这包括静态文件压缩的​​用法，因此默认情况下，从lit-html中仅导入render和html会产生3.5Kb的文件包，以缩小和压缩文件大小。

那就是您的数字来源，即使比其第一个发行版（其基本功能确实在大约2Kb（最小化并压缩））中的数字稍大一点，lit-html也提供了3.5Kb中已经足够的汁液，与它的大小绝对无关万维网的其余部分。

带有所有最终cookie的favicon.ico或获取它的请求，可能已经加权了相似的字节数量，即使不是更大也是如此。

您确定互联网问题，甚至您的网站是否增加了3.5Kb的资源？

mobile oriented budget suggested by major experts小于170Kb，经过压缩和压缩，大约是lit-html的48倍，我认为这对于您的初始逻辑来说已经足够了。

关于批评许可证


  此外，最终的dist软件包已将其嵌入其中7次：


压缩不仅使重复的文本大小几乎无关紧要，而且您还在争论Google产品中的许可文本，如果我是你，我将以任何方式小心隐藏。


  我以为webpack 4应该自动删除注释。


当注释写为/*! important */时，这些注释通常由缩小符保留，因为源代码的作者打算保留该注释。

这是保持许可证有效的一种常用技术，但是即使有一些工具不关心任何注释，除非另有说明（例如通过uglify-js通过--comments=/^!/进行指示），请记住您的站点，应用程序，项目，即使用第三方软件的软件，必须以某种方式包括该软件许可。

我相信您并不是要抹煞Polymer团队或Google许可，但由于此事非常棘手，所以我认为最好确保我们在同一页面上。

无论如何如何最小化


  我如何才能将其与其他所有代码紧密地最小化（其中注释会自动删除，而所有内容都将放在一行中）？


默认情况下为Webpack preserves important comments，除非您希望将自己挂接到Webpack内部以避免默认情况下这样做，否则可以使用其中一种不会保留它们的工具，除非另有说明。

最常用的是UglifyJS。被称为uglify-js npm模块或ES2015 +代码的uglify-es，默认情况下会剥离所有注释。

您可以通过npx尝试安装，甚至无需安装它：

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

并看到输出将不再显示任何评论。

自动化的方法是将UglifyJS安装为devDependency，并直接或通过 -o指令将Webpack文件修改为 package.json脚本的条目。

备择方案

将UglifyJS集成到Webpack和Rollup中非常容易，但是由于您已经了解Webpack，所以我建议您看一下 this repository，其目的只是为了展示如何捆绑lit-html或hyperHTML。

您可以在本地克隆，安装和测试它，以查看最佳结果，如果您已经针对支持ES2015的浏览器，最终将放弃babel转换（它会产生较小的结果）。

您可以 verify live将其缩小并压缩，包括“ Hello World”代码，Webpack中的lit-html权重3.5Kb和汇总中的4.2Kb，但在将其与整个预设环境一起转换后，您也可以进行调整以适应微调您的套装。

作为总结

即使我是与lit-html竞争的主要库的作者，阅读有关10Kb以下库的抱怨也极大地激励了人们的思想，这些抱怨彻底改变了我们开发Web的方式。

每个其他主流框架的重量都比light或hyperHTML重5至20倍，并且Web的问题要比〜5K实用程序大，因此请下次看到您感兴趣的库的许可证时，其大小与所有内容无关如今是网络，不要轻易向图书馆作者或仅尊重图书馆版权和许可的捆绑销售商开枪。

谢谢。