Polymer component template minification - polymer

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:
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

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}
}],