我有一个小型节点应用程序,使用 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,但没有运气。
减少这种情况的最佳方法是什么?
最好避免嵌套文字,链接更好并且更容易阅读。
有可能解析速度也会更快。
在这种情况下,三元数被包裹在括号中,因此链接不会被破坏。
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>
您提到的工具是为了缩小 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 呢?
为什么不自己删除它们呢?
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 实体
(换行符)和 	
(制表符)。