本文中，我们看看开发人员使用JavaScript和正则表达式在他的网站上缩小元素的过程。阅读更多！

我创建了一个ShareButton Web组件，虽然效果并不好，但我喜欢它，并在创建Web组件时了解了很多关于Web组件的生态系统。

这个项目的主要目标是将所有内容封装在一个ES6类中。我这样做是因为我不想从我的元素发出任何非开发人员控制的Web请求。我认为我已经实现了这个目标，但是代码的可读性受损，因为我不得不内联定义元素的HTML和CSS。

它看起来很像这样：

const overlay = document.createElement('div');

overlay.id = 'overlay';

overlay.innerHTML = `

<div id="urlbar">

<input type="url" id="url" />

<button id="copy" aria-label="Copy to clipboard">

<slot name="clipboard">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">

<path fill="none" d="M0 0h24v24H0z"/>

<path d="M16 1H4C3 1 2 2 2 3v14h2V3h12V1zm3 4H8C7 5 6 6 6 7v14c0 1 1 2 2 2h11c1 0 2-1 2-2V7c0-1-1-2-2-2zm0 16H8V7h11v14z"/>

</svg>

</slot>

</button>

<button id="mailto" aria-lable="Mail to">

<slot name="mailto">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">

<path fill="none" d="M0 0h24v24H0z"/>

<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 id="android" aria-label="Share on Android">

<slot name="android">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">

<path fill="none" d="M0 0h24v24H0z"/>

<path d="M6 18c0 .6.5 1 1 1h1v3.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V19h2v3.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V19h1c.6 0 1-.5 1-1V8H6v10zM3.5 8C2.7 8 2 8.7 2 9.5v7c0 .8.7 1.5 1.5 1.5S5 17.3 5 16.5v-7C5 8.7 4.3 8 3.5 8zm17 0c-.8 0-1.5.7-1.5 1.5v7c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-7c0-.8-.7-1.5-1.5-1.5zm-5-5.8L16.8 1c.2-.3.2-.6 0-.8-.2-.2-.5-.2-.7 0l-1.3 1.4C13.7 1.2 13 1 12 1c-1 0-2 .2-2.7.6L7.8 0H7v1l1.5 1C7 3.2 6 5 6 7h12c0-2-1-3.8-2.5-4.8zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/>

</svg>

</slot>

</button>

</div>

<div class="buttons">

<slot name="buttons"></slot>

</div>`;

这并不坏，但这也意味着我的元素不可能被最大限度地缩小。事实上，除了聚合物工具（专注于解析HTML导入）之外，我找不到任何有关部署经过优化的自定义元素（如果我错了，请告诉我）的工具或指导。

我不认为作为一名元素作者，我应该将整个构建链和工具生态系统强加给我的元素用户。我也相信我应该能够为用户提供尽可能小的内置文件，为用户提供默认的快速体验，而无需跳过这些环节。

我不希望任何超级复杂的基础架构将单独的CSS和JS文件合并到一个输出中; 我只想让自定义元素的开发版本与我部署的版本完全相同......只是更小。

我希望通过这篇文章，至少你可以看到我的过程，并了解我如何缩小我的自定义元素。

压缩ES6类

我用过babili。这是一个压缩ES6类的非常整洁的工具。它仍然是试验性的，但我没有遇到任何重大问题。

npm install babili --save-dev

您可以通过许多不同的方式运行它，我选择通过STDOUT将数据传输到它。

cat xyz | babili

这很有效，但它将字符串留下，因为它假定（正确）这些字符串的输出和格式是有意的。如果我想让元素尽可能小，那么我需要缩小嵌入到元素中的CSS和HTML。

那么你如何解决这样的问题呢？

我选择了打破压缩HTML并将CSS压缩成两个额外步骤的问题。

压缩内联CSS

我无法轻松找出一种可扩展的方式来推断字符串是CSS，并且需要压缩，所以我上了旧学校并复制了我在Google Web Starter Kit中看到的一些东西 - 自定义标记，用于定义需要的东西被处理。

自定义标记只是浏览器忽略的普通注释，但是缩小器也会被删除。

我编写了这个简单的脚本，它从STDIN中读取，加载整个文件，然后查找自定义注释，然后使用简单的正则表达式在运行替换函数之前查找注释和内容，然后再打印整个输出回STDOUT。

它包括clean-css，它似乎会做的伎俩。

const CleanCSS = require('clean-css');

const process = require('process');

let input = '';

process.stdin.on('readable', () => {

let chunk = process.stdin.read();

if(chunk != null) input += chunk;

})

process.stdin.on('end', () => {

let cssRe = /\/\*compress\*\/(.|[\n\r])+?\/\*endcompress\*\//;

let compressedOutput = input.replace(cssRe, (match, p1, offset, string) => {

let output = new CleanCSS({}).minify(match);

return output.styles;

});

process.stdout.write(compressedOutput);

process.exit();

});

我不得不加强我的内联CSS /*compress*/和/*endcompress*/注释，这对于任何阅读源代码的开发人员来说都可能有点混乱，但它确实给了我很大的灵活性。

压缩内联HTML

我为HTML缩小做了完全相同的事情。这个html-minifier软件包非常整齐，我玩弄了一些理想的默认设置，运行良好。

const minify = require('html-minifier').minify;

const process = require('process');

let input = '';

process.stdin.on('readable', () => {

let chunk = process.stdin.read();

if(chunk != null) input += chunk;

})

process.stdin.on('end', () => {

let cssRe = /<!--compress-->(.|[\n\r])+?<!--endcompress-->/;

let compressedOutput = input.replace(cssRe, (match, p1, offset, string) => {

return minify(match, { removeAttributeQuotes: true, removeComments: true, collapseWhitespace: true });

});

process.stdout.write(compressedOutput);

process.exit();

});

连接在一起

共享按钮具有build压缩CSS和HTML 的自定义脚本，最后它执行ES6缩小操作，并确保用于分发和包含的文件尽可能小。

"scripts": {

"build": "cat share-button.js | node build/compress-css.js | node build/compress-html.js | babili > dist/share-button.min.js"

}

将它整合到我的博客中

我打算写一篇关于部署Web组件的咆哮，但最后它非常简单。

1.从我的项目中安装元素。

npm install sharebutton --save

2.将它添加到我的构建部署中。

install:

- npm install

- cp node_modules/sharebutton/dist/share-button.min.js static/javascripts/share-button.js

下一步是什么？

我认为这是值得的。该元素现在是7917字节与11700字节，大约减小了33％（gzip，与2742比较是2792字节），所以我现在很高兴（尽管我认为我可以做得更好）。我现在也有一个可以用于其他元素的进程，并且所有内容都封装在这个包中。

我支持自己进入一个角落，选择内联CSS和HTML，但我仍然认为这是构建自定义元素的最佳解决方案。

这里介绍的解决方案将在缩小元素方面做得很好，但是它不会做得很好，例如，因为自定义元素对外部元素不透明，所以我可以在缩小CSS选择器，ID等方面做得更好。 。但CSS，HTML和JS没有足够的耦合度，足以让我有信心做到这一点。

我很乐意在这个过程中得到你的想法，如果你做了类似的事情，并有更好的结果。

绍

JSS是CSS的创作工具，它允许你使用JavaScript以声明，无冲突和可重用的方式描述样式。它可以在浏览器，服务器端或在构建时在Node中编译。JSS与框架无关。它由多个包组成：核心部分，插件以及框架集成等。

Github

https://github.com/cssinjs/jss stars:5.1k

快速开始

如果你已经对使用JSS感兴趣，可以使用在线代码编辑器。在CodeSandbox（一个非常实用的在线编辑器，可以用来学习各种编程技能）上尝试Hello World示例。以下是三种不同框架下的用法（代码图片生成自carbon网站）：

• JSS

• React-JSS

• Styled-JSS

特性

• 真实的CSS

JSS生成实际的CSS，而不是内联样式。它支持每个现有的CSS功能。CSS规则只创建一次，并使用其类名与元素重复使用，与内联样式相反。此外，当DOM元素更新时，将应用先前创建的CSS规则。

• 无冲突选择器

JSS默认生成唯一的类名。它允许避免典型的CSS问题，默认情况下一切都是全局的。它完全消除了命名约定的需要。

• 代码重用

使用JavaScript作为宿主语言使我们有机会以常规CSS无法实现的方式重用CSS规则。您可以利用JavaScript模块，变量，函数，数学运算等。如果做得好，它仍然可以完全声明。

• 易于拆卸和修改

CSS规则的明确使用允许您跟踪消费者并确定是否可以安全地删除或修改它。

• 动态Style

使用JavaScript函数和Observable可以在浏览器中动态生成样式，使有机会访问应用程序状态，浏览器API或远程数据以进行样式设置。你不仅可以定义一次样式，还可以在任何时间点以有效的方式更新样式。

• 用户控制的动画

JSS可以高效地处理CSS更新，可以使用它创建复杂的动画。使用函数值，Observables并将它们与CSS过渡相结合，可以为用户控制的动画提供最大的性能。对于预定义的动画，使用@keyframes和transition更好，因为它们将完全取消阻止JavaScript线程。

• 关键的CSS

要优化第一次绘制的时间，你可以使用服务器端渲染并提取关键CSS。可以将CSS的呈现与HTML的呈现结合起来，这样就不会生成未使用的CSS。它将导致在服务器端呈现期间提取的最小关键CSS，并允许内联它。

• 插件

JSS核心实现了基于插件的架构。它允许您创建可以实现自定义语法或其他强大功能的自定义插件。JSS有许多官方插件，可以单独安装或使用默认预设。社区插件的一个很好的例子是jss-rtl。

• Expressive 语法

由于各种插件，JSS允许您使用现有的全局类名来嵌套，全局选择器和组合。例如，允许您以比CSS更可读的方式表达属性。如果要直接从浏览器开发工具复制粘贴样式，也可以使用模板字符串。jss-plugin-expandbox-shadow

• 完全隔离

另一个有用的插件示例是，它允许您完全隔离元素与全局级联规则，并可能覆盖不需要的属性。在创建应该在第三方文档内部呈现的窗口小部件时尤其有用。jss-plugin-isolate

• React整合。

React-JSS包提供了一些额外的功能：

1. 动态主题 - 允许基于上下文的主题传播和运行时更新。
2. 关键CSS提取 - 仅提取渲染组件中的CSS。
3. 延迟评估 - 样式表在组件安装时创建。
4. 样式表的静态部分在所有元素之间共享。
5. 使用props作为参数自动更新函数值和规则。

• JavaScript构建管道

CSS不需要额外的构建管道配置。无论你选择构建JavaScript的工具是什么，它都可以与JSS一起使用。

安装使用

yarn add jss

yarn add jss-preset-default //使用默认设置

import jss from 'jss'
import preset from 'jss-preset-default'
jss.setup(preset())
// 创造你的style.
const style = {
 myButton: {
 color: 'green'
 }
}
//编译样式，应用插件。
const sheet = jss.createStyleSheet(style)
//如果要在客户端上呈现，请将其插入DOM。
sheet.attach()
//如果要渲染服务器端，请获取CSS文本。
sheet.toString()

• 使用自定义插件进行设置

import jss from 'jss'
import camelCase from 'jss-plugin-camel-case'
import somePlugin from 'jss-some-plugin'
//使用插件。
jss.use(camelCase(), somePlugin())
// Create your style.
const style = {
 myButton: {
 color: 'green'
 }
}
//编译样式，应用插件。
const sheet = jss.createStyleSheet(style)
// 如果要在客户端上呈现，请将其插入DOM
sheet.attach()
// 如果要渲染服务器端，请获取CSS文本。
sheet.toString()

• 指定DOM插入点

<head>
 <title>JSS</title>
 <!-- 自定义插入点 -->
</head>

import jss from 'jss'
jss.setup({insertionPoint: 'custom-insertion-point'})

<head>
 <title>JSS in body</title>
</head>
<body>
 <div id="insertion-point">
 这可能是你选择的任何DOM节点，可以作为插入点。
 </div>
</body

import jss from 'jss'
jss.setup({
 insertionPoint: document.getElementById('insertion-point')
})

简单案例

通过两张图片来体验：

总结

JSS的功能是十分强大的，不仅仅让写css的方式放到了JavaScript，这样对更加喜爱编写javascript的小伙伴来说是值得尝试的，而且还支持服务器端渲染等更多高级的特性，前端技术百花齐放，但目前仍然不变的是掌握JavaScript者得天下的时代！