在 JS 包中缩小 HTML 文字的最佳方法[已关闭]

问题描述 投票:0回答:3

我有一个小型节点应用程序,使用 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,但没有运气。

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

javascript node.js webpack
3个回答
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>


1
投票

您提到的工具是为了缩小 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 呢?


0
投票

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

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 实体
&#10;
(换行符)和
&#9;
(制表符)。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.