如何在 JS 包中缩小 HTML 文字 [已关闭]

Question

我有一个小型节点应用程序，使用 webpack 和 babel 来渲染生产 JS——生成优化和缩小的 js bundle。 在源 JS 中，为了清晰和易于维护，我使用了如下例所示的 HTML 文字：

breadcrumbsElement.innerHTML = `
        <ul class="breadcrumb mr-breadcrumb">
            <li class="breadcrumb-item">
                <a href="/">HostShop</a>
            </li>
            ${breadcrumbLabel ? `
            <li class="breadcrumb-item">
                <span>${breadcrumbLabel}</span>
            </li>` : ''}
        </ul>
    `;

但是，当我这样做时

npm run build

html 文字会使用编码的空格进行渲染：

r.innerHTML = `\n\t\t<ul class="breadcrumb mr-breadcrumb">\n\t\t\t<li class="breadcrumb-item">\n\t\t\t\t<a href="/">HostShop</a>\n\t\t\t</li>\n\t\t\t${t ? `\n\t\t\t<li class="breadcrumb-item">\n\t\t\t\t<span>${t}</span>\n\t\t\t</li>` : ""}\n\t\t</ul>\n\t`;

HTML 标签之间不必要的空格（与功能无关，只是表示）被编码和保留，我认为这是缩小/捆绑器问题。

我尝试了一些流行的工具，例如 terser，但没有运气。

减少这种情况的最佳方法是什么？

Answer 1

最好避免嵌套文字，链接更好并且更容易阅读。

有可能解析速度也会更快。

在这种情况下，三元数被包裹在括号中，因此链接不会被破坏。

breadcrumbLabel = `I 
Am<br>
Multiline :)
`

breadcrumbsElement.innerHTML = `
        <ul class="breadcrumb mr-breadcrumb">
            <li class="breadcrumb-item">
                <a href="/">HostShop</a>
            </li>` +
            (breadcrumbLabel ? `
            <li class="breadcrumb-item">
                <span>${breadcrumbLabel}</span>
            </li>` : '') + '</ul>';

<div id=breadcrumbsElement>

Answer 2

您提到的工具是为了缩小 JavaScript 代码，而不是您的数据。他们不会解释您的文字并为您决定什么相关或不相关。

如果您不需要这些空格，请不要首先添加它们。

/**
 * Create an HTML element
 * @param {string} tagName - The tag name of the element
 * @param {Record<string, string>} attributes - The attributes of the element
 * @param {string} children - The children of the element
 * @returns {string} The HTML string of the element
 */
const createElement = (tagName, attributes, children) =>
    `<${tagName}${
        attributes != null
            ? Object.entries(attributes)
                  .map(([key, value]) => ` ${key === 'className' ? 'class' : key}="${value}"`)
                  .join('')
            : ''
    }${children != null && children.length > 0 ? `>${children.filter(Boolean).join('')}</${tagName}>` : ''}`;

breadcrumElement.innerHTML = createElement('ul', { className: 'breadcrumb mr-breadcrumb' }, [
    createElement('li', { className: 'breadcrumb-item' }, [
        createElement('a', { href: '/' }, ['HostShop']),
        breadcrumbLabel ? createElement('span', { className: 'breadcrumb-item' }, [breadcrumbLabel]) : null,
    ]),
]);

您的代码中将多一个函数，但缩小后的代码会更小。

您还必须重写文字，但您的代码将更易于管理。

一些工具可以为此提供帮助。

但此时为什么不直接使用 React/jsx 呢？

Answer 3

为什么不自己删除它们呢？

breadcrumbsElement.innerHTML = `
        <ul class="breadcrumb mr-breadcrumb">
            <li class="breadcrumb-item">
                <a href="/">HostShop</a>
            </li>
            ${breadcrumbLabel ? `
            <li class="breadcrumb-item">
                <span>${breadcrumbLabel}</span>
            </li>` : ''}
        </ul>
    `.replace(/[\n\t]/g, "");

我在生产中使用了这种方法，在必须使用 vanilla JS 的环境中模拟 JSX 风格的代码。

/[\n\t]/g

 是匹配字符串中每个换行符和制表符的正则表达式。如果您不想删除特定的换行符或制表符，可以使用 HTML 实体 




（换行符）和 

	

（制表符）。