Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
like image 277
fernandopasik Avatar asked Apr 01 '18 21:04

fernandopasik


2 Answers

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

like image 61
tony19 Avatar answered Nov 09 '22 22:11

tony19


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

"builds": [{
  "bundle": true,
  "js": {"minify": true},
  "css": {"minify": true},
  "html": {"minify": true}
}],
like image 2
Andrew Ymaz Avatar answered Nov 09 '22 22:11

Andrew Ymaz