Javascript 如何缩小Lit HTML（包括注释）

我决定通过以下方式尝试lit html：

npm install lit-html --save

我听过很多次（来自各种来源）lit html的大小只有2或3KB，但仅通过导入html和渲染导出，我的网页就增长了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
**/

这有点过分了

我以为Webpack4会自动删除评论。我怎样才能用我所有的其他代码（注释被自动删除，所有的东西都被放在一行中）将其最小化

---

如果lit html太麻烦的话，我可以不使用它。

这个问题是对目前Web开发中出现的问题的一个很好的总结，因此我决定用这个答案来解决这个问题，同时提供回答OP中所有子问题所需的各种细节

依赖关系只是因为？

我听过很多次（从各种来源）lit html的大小只有2或3KB

为了在软件中产生最好的结果，我们通常决定包含一些依赖性，因为它的特性、它为我们解决了什么以及最终的效果如何

人们说一个库或实用程序很小，这一事实不应自动转化为“那么我将包括它”，特别是当您的最后一句话是：

我可以生活在没有灯光的html

因为我对你的问题没有多少努力，甚至没有热情，也没有意愿使用lit-html，你确定你真的需要它吗

衡量错误的权衡

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

这包括使用静态文件压缩，因此默认情况下，仅从lit html导入

render

和

html

将产生一个3.5Kb的包，作为缩小和压缩的产品大小

这就是你的数字来源，即使比它的第一个版本稍微大一点，在这个版本中，基本功能确实在2Kb左右（缩小和压缩），lit html已经提供了足够的3.5Kb的容量，与其他万维网相比，这个容量是绝对不相关的

您的favicon.ico或获取它的请求，携带了所有最终的cookies，可能已经有了类似的（如果不是更大的话）字节量

你确定互联网的问题，甚至你的网站，是一个额外增加3.5Kb的图书馆吗

它的大小不到170Kb，经过缩小和压缩，大约是lit html的48倍，我认为这足够容纳您的初始逻辑

关于批评许可证

此外，最终的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
**/

不仅压缩使得重复的文本大小几乎无关紧要，你还在争论谷歌产品的许可证文本，如果我是你，我无论如何都会小心隐藏

我以为Webpack4会自动删除评论

当注释像

/*那样编写时！重要提示*/

这些注释通常由缩微器保存，因为源代码的作者有意保留该注释

这是一种常见的保留许可证的技术，但即使有一些工具不关心任何类型的注释，除非有不同的指示，例如通过

--comments=/^/通过uglify js，请记住，使用第三方软件的站点、应用程序、项目必须以某种方式包含此类软件许可证

我相信你不是有意诋毁Polymer团队或谷歌许可证，但由于这件事非常微妙，我认为最好确保我们在这些问题上意见一致

无论如何，如何最小化

我怎样才能用我所有的其他代码（注释被自动删除，所有的东西都被放在一行中）将其最小化

默认情况下，除非您想将自己连接到Webpack内部以避免默认情况下这样做，否则您可以使用其中一个不会保留它们的工具，除非另有指示

最常用的是。对于ES2015+代码，它被称为
uglify js
npm模块，或
uglify es
，默认情况下会删除所有注释

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

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

并确保输出将不会显示任何注释

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

备选方案

在Webpack和Rollup中集成UglifyJS非常容易，但既然您已经了解Webpack，我建议您看一看，它的唯一目的是展示如何绑定lit html或hyperHTML

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

您可以将其缩小并压缩，包括“Hello World”代码，Web包中的Light html权重为3.5Kb，汇总中的权重为4.2Kb，但在使用整个预设环境传输后，您还可以对其进行调整以微调捆绑包

作为摘要

即使我是与lit-html竞争的主库的作者，读到关于10Kb以下的库的抱怨也是非常令人沮丧的，它彻底改变了我们开发Web的方式

其他主流框架的重量是lit或hyperHTML的5到20倍，Web的问题比~5K实用程序更大，所以请下次看到您感兴趣的库的许可证时，请注意，其大小是无关的