Polymer component template minification

Question

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

Answer 1

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:

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

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

2. 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
   

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

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

4. 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"
   }
   

5. 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

Answer 2

Did you try to setup your polymer.json with the following config?:

"builds": [{
  "bundle": true,
  "js": {"minify": true},
  "css": {"minify": true},
  "html": {"minify": true}
}],