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

时间:2018-11-26 07:42:06

标签: javascript typescript webpack-4 hyperhtml lit-html

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

npm install lit-html --save

我无数次(从各种来源)听说lit-html的大小只有2或3KB,但是仅导入 html render 即可导出使我的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太过侵入性,我可以活下去。

1 个答案:

答案 0 :(得分:10)

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

依赖关系仅仅是因为?

  

我无数次(从各种来源)听说lit-html的大小仅为2或3KB

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

人们说一个库或实用程序很小的事实,不应自动转换为“ 然后我将其包含”,特别是当您的最后一个语句是:

  

我可以不用lit-html住

由于我对您的问题没有太多的努力甚至热情,或者愿意使用 lit-html ,因此您确定根本不需要吗?

权衡取舍错误

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

其中包括对静态文件压缩的使用,因此默认情况下,从 lit-html 中仅导入renderhtml 一束3.5Kb ,以缩小和压缩后的生产尺寸。

这就是您的数字来源,即使比其第一个发行版(其基本功能确实在大约2Kb(最小化并压缩))中的数字稍大,lit-html也已经提供了3.5Kb以上的足够果汁,这绝对是无关紧要的与万维网的其余部分相比。

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

您确定互联网问题,甚至您的站点是否是一个额外增加3.5Kb的图书馆?

mobile oriented budget suggested by major experts小于170Kb(经过压缩和压缩),大约是lit-html的48倍,我认为这足以容纳您的 initial 逻辑。

关于批评许可证

  

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

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

  

我认为webpack 4应该自动删除评论。

当注释写成/*! important */时,注释通常会保留在这些注释符中,因为源代码的作者打算保留该注释。

这是保留许可证的常用技术,但是即使有一些工具不关心任何注释,除非有不同的说明,例如通过{em> uglify-js通过--comments=/^!/ / em>,请记住您的网站,应用程序,项目使用的是第三方软件,必须 包括 此类软件许可< / strong>。

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

无论如何如何最小化

  

如何将其与我的其他所有代码紧密地最小化(自动删除注释,并且将所有内容一起推入一行)?

默认情况下,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倍,并且网络存在的问题要比〜5K实用程序大,因此,下次您看到感兴趣的库许可时,请注意,其大小无关紧要对于当今网络上的所有内容,不要轻易向仅仅尊重图书馆版权和许可的图书馆作者或捆绑商开枪。

谢谢。