如何缩小自定义元素的html、css和js？答案

【问题标题】：How to minify html, css and js of custom elements?如何缩小自定义元素的html、css和js？
【发布时间】：2014-08-12 08:01:37
【问题描述】：

我正在尝试创建一些没有 Polymer 的自定义元素，如下面的代码。

demo-element.html

<template id="demo-template">
    <style type="text/css">
        div {
            background-color: #F2CEE5;
            padding: 10px;
        }
    </style>

    <div><content></content></div>
</template>

<script type="text/javascript">
    (function(){
        var proto = Object.create(HTMLElement.prototype, {
            createdCallback: {
                value: function() {
                    var t = document.querySelector('#demo-template');
                    var clone = document.importNode(t.content, true);
                    this.createShadowRoot().appendChild(clone);
                }
            }
        });
        var element = document.registerElement('demo-element', {prototype: proto});
    })();
</script>

有什么好的解决方案可以缩小这些 html 组件吗？
顺便说一句，我在NodeJS中总是使用UglifyJS来缩小js文件。

【问题讨论】：

对于支持 SPDY 的服务器来说，gzipping 是否足够？

标签： javascript web-component shadow-dom

【解决方案1】：

Polymer 的 vulcanize 工具在我使用非 Polymer Web 组件的项目中为我工作。

【讨论】：

Vulcanize 只是为了将它们连接到一个文件中，不是吗？我真的不想连接它们，而是缩小它们中的每一个。
vulcanize --strip 标志会让你成功，但它不会像 uglify 这样缩短 JavaScript 变量。平均而言，它将我的文件大小减少到初始大小的 2/3 左右。这是一个好的开始。
我已经开始倾向于为每个 web 组件使用单独的 JS、HTML 和 CSS 文件（根据需要），如果你这样做，你可以先 uglify 你的 JS 文件，然后使用 vulcanize --strip 标志。