咨询Polymer组件模板字面量空格压缩的实现方法

AI 小北

2026-5-21

如何用polymer-cli压缩模板字面量中的空格？

你提到的需求完全合理——常规JS压缩工具确实不会处理模板字面量内部的冗余空格，而polymer-cli正好内置了针对Polymer模板的专属优化能力，能完美解决这个问题。

实现方法

polymer-cli的polymer build构建命令默认就会对html模板字面量进行压缩处理，具体包括：

移除模板内多余的空格、制表符和换行符
智能保留CSS/JS语法运行所需的必要空格
压缩后的模板功能完全不受影响，同时能显著减少代码体积

效果示例

假设你的原始代码是这样的：

import{PolymerElement,html}from'../node_modules/@polymer/polymer/polymer-element.js';
export default class MyApp extends PolymerElement{
  static get is(){return'my-app'}
  static get template(){
    return html`
      <style>
        :host {
          display: block;
          height: 100vh;
        }
      </style>
      <div class="container">
        <h1>Hello Polymer</h1>
      </div>
    `;
  }
}
customElements.define(MyApp.is, MyApp);

运行polymer build之后，压缩后的代码就会变成你期望的样子：

import{PolymerElement,html}from'../node_modules/@polymer/polymer/polymer-element.js';export default class MyApp extends PolymerElement{static get is(){return'my-app'}static get template(){return html`<style>:host{display:block;height:100vh;}</style><div class="container"><h1>Hello Polymer</h1></div>`}}customElements.define(MyApp.is, MyApp);