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

How to minify Lit-HTML (including comments)

我决定尝试 lit-html 通过:

npm install lit-html --save

我多次(从各种来源)听说 lit-html 的大小只有 2 或 3KB,但仅通过导入 htmlrender 导出它导致我的 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 应该会自动删除评论。我怎样才能将它与我的所有其他代码紧密地最小化(自动删除评论并且所有内容都被放在一行中)?

我可以不点亮-html 如果它太打扰的话。

这个问题是对当今 Web 开发问题的一个很好的总结,所以我决定用这个答案来解决问题,还提供了回答 OP 的所有子问题所需的各种细节。

依赖只是因为 ?

I've heard numerous times (from various sources) that lit-html is only 2 or 3KB in size

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

事实上人们说一个库或实用程序很小,不应该自动翻译成“然后我会包含它”,特别是当你的最后一句话是:

I can live without lit-html

既然我对你的问题没有太多的努力甚至热情,也没有意愿使用 lit-html,你确定你真的需要它吗?

错误衡量的权衡

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

这包括使用静态文件压缩,因此默认情况下,仅从 lit- 导入 renderhtml html 将生成 一个 3.5Kb 的包 作为缩小和压缩的生产大小。

这就是你的数字的来源,即使比它的第一个版本稍微大一点,在第一个版本中,基本功能确实在大约 2Kb(压缩和 gzip 压缩)中工作,lit-html 已经提供了 3.5Kb 中足够的汁液,与万维网的其他部分相比,其大小绝对无关紧要。

您的 favicon.ico 或获取它的请求,携带所有最终的 cookie,可能已经具有相似甚至更大的字节数。

您确定互联网甚至您的网站的问题是一个额外增加 3.5Kb 的库吗?

mobile oriented budget suggested by major experts缩小压缩后不到170Kb,大概是lit-html的48倍,我觉得对你的initial[=113=来说足够了]逻辑。

关于批评许可

Additionally, the final dist package had this embedded in it 7 times:

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

I thought webpack 4 was suppose to remove comments automatically.

当评论写成 /*! important */ 时,这些评论通常由压缩器保留,因为源代码的作者打算留下评论。

这是一种保留许可证的常用技术,但即使有一些工具不会关心任何类型的评论,除非有不同的指示,例如通过 --comments=/^!/ 通过 uglify-js,记住你的网站,应用,项目,就是使用第三方软件,必须 include 此类软件许可以某种方式。

我相信你不是故意诋毁 Polymer 团队或 Google 许可证,但由于这件事非常微妙,我认为最好确保我们都在关于这些的同一页。

怎么最小化,反正

How can I get this to be tightly minimized with all my other code (where comments are automatically removed and everything is just pushed together in one line)?

默认情况下,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 脚本的入口。

备选方案

在 Webpack 和 Rollup 中集成 UglifyJS 非常容易,但是既然你已经了解 Webpack,我建议你看一下 this repository,它的唯一目的是展示如何捆绑 lit-html 或 hyperHTML.

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

您可以 verify live 缩小和 gzip 后,包括“Hello World”代码,在 Webpack 中 lit-html 权重为 3.5Kb,以及汇总 4.2Kb,但在使用整个预设环境转译后,您还可以调整一些内容以微调您的包。

总结

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

所有其他主流框架都比 lit 或 hyperHTML 重 5 到 20 倍,并且 Web 的问题比 ~5K 实用程序更大,所以下次您看到您感兴趣的库的许可证时,请注意它的大小现在与 Web 上的一切都无关紧要,不要轻易攻击图书馆作者或仅仅尊重图书馆版权和许可的捆绑商。

谢谢。