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);
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
Did you try to setup your polymer.json
with the following config?:
"builds": [{
"bundle": true,
"js": {"minify": true},
"css": {"minify": true},
"html": {"minify": true}
}],
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With