[SOLVED] Polymer component template minification

Polymer component template minification

I'm looking for a way to minify the white space in template literals. Since regular js minification wouldn't remove white space on a template literal I was expecting that maybe polymer-cli had a way to minify those.

An example of the result of minification:

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;
        }

        .app {
          height: 100vh;
        }
      </style>
      <div class="app">
        My App
      </div>
    `}}customElements.define(MyApp.is,MyApp);

Solution

polymer-cli currently doesn't support minification of tagged template strings. Internally, it uses Babel plugins to minify JavaScript, so ideally we'd be able to insert the babel-plugin-minify-template-strings plugin into the pipeline when minification is enabled.

For now, we could use babel-cli along with that plugin to process the build output of polymer-cli:

Start with a Polymer 3 template project, e.g., PolymerLabs/start-polymer3.

git clone https://github.com/PolymerLabs/start-polymer3.git
cd start-polymer3

Install babel-cli and the babel-plugin-minify-template-strings plugin. Your project may need other Babel plugins. In this case, this template project needs babel-plugin-syntax-dynamic-import for Babel to handle the dynamic imports in the code.
```
yarn add -D babel-cli \
            babel-plugin-minify-template-strings \
            babel-plugin-syntax-dynamic-import
```

Add a .babelrc config file with the following file contents:

{
  "compact": true,
  "ignore": [
    "node_modules"
  ],
  "plugins": [
    "minify-template-strings",
    "syntax-dynamic-import"
  ]
}

Add a build NPM script to package.json to run babel-cli (with .babelrc above) on the JavaScript output of polymer build:
```
"scripts": {
  "build": "polymer build && $(npm bin)/babel -d . build/**/src/**/*.js"
}
```

Run npm run build (or yarn build). The command output (running with polymer-cli (1.7.0-pre.13), zsh, macOS High Sierra) should look similar to this:

➜  start-polymer3 git:(master) ✗ yarn build
yarn run v1.3.2
$ polymer build && $(npm bin)/babel -d . build/**/src/**/*.js
info: [cli.command.build]    Clearing build/ directory...
info: [cli.build.build]    (es6-unbundled) Building...
info: [cli.build.build]    (es6-unbundled) Build complete!
build/es6-unbundled/src/lazy-element.js -> build/es6-unbundled/src/lazy-element.js
build/es6-unbundled/src/start-polymer3.js -> build/es6-unbundled/src/start-polymer3.js
✨  Done in 8.66s.
➜  start-polymer3 git:(master) ✗

See GitHub repo with the above changes, and its sample output