本文中，我們看看開發(fā)人員使用JavaScript和正則表達式在他的網(wǎng)站上縮小元素的過程。閱讀更多！

我創(chuàng)建了一個ShareButton Web組件，雖然效果并不好，但我喜歡它，并在創(chuàng)建Web組件時了解了很多關(guān)于Web組件的生態(tài)系統(tǒng)。

這個項目的主要目標是將所有內(nèi)容封裝在一個ES6類中。我這樣做是因為我不想從我的元素發(fā)出任何非開發(fā)人員控制的Web請求。我認為我已經(jīng)實現(xiàn)了這個目標，但是代碼的可讀性受損，因為我不得不內(nèi)聯(lián)定義元素的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導(dǎo)入）之外，我找不到任何有關(guān)部署經(jīng)過優(yōu)化的自定義元素（如果我錯了，請告訴我）的工具或指導(dǎo)。

我不認為作為一名元素作者，我應(yīng)該將整個構(gòu)建鏈和工具生態(tài)系統(tǒng)強加給我的元素用戶。我也相信我應(yīng)該能夠為用戶提供盡可能小的內(nèi)置文件，為用戶提供默認的快速體驗，而無需跳過這些環(huán)節(jié)。

我不希望任何超級復(fù)雜的基礎(chǔ)架構(gòu)將單獨的CSS和JS文件合并到一個輸出中; 我只想讓自定義元素的開發(fā)版本與我部署的版本完全相同......只是更小。

我希望通過這篇文章，至少你可以看到我的過程，并了解我如何縮小我的自定義元素。

壓縮ES6類

我用過babili。這是一個壓縮ES6類的非常整潔的工具。它仍然是試驗性的，但我沒有遇到任何重大問題。

npm install babili --save-dev

您可以通過許多不同的方式運行它，我選擇通過STDOUT將數(shù)據(jù)傳輸?shù)剿?/p>

cat xyz | babili

這很有效，但它將字符串留下，因為它假定（正確）這些字符串的輸出和格式是有意的。如果我想讓元素盡可能小，那么我需要縮小嵌入到元素中的CSS和HTML。

那么你如何解決這樣的問題呢？

我選擇了打破壓縮HTML并將CSS壓縮成兩個額外步驟的問題。

壓縮內(nèi)聯(lián)CSS

我無法輕松找出一種可擴展的方式來推斷字符串是CSS，并且需要壓縮，所以我上了舊學(xué)校并復(fù)制了我在Google Web Starter Kit中看到的一些東西 - 自定義標記，用于定義需要的東西被處理。

自定義標記只是瀏覽器忽略的普通注釋，但是縮小器也會被刪除。

我編寫了這個簡單的腳本，它從STDIN中讀取，加載整個文件，然后查找自定義注釋，然后使用簡單的正則表達式在運行替換函數(shù)之前查找注釋和內(nèi)容，然后再打印整個輸出回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();

});

我不得不加強我的內(nèi)聯(lián)CSS /*compress*/和/*endcompress*/注釋，這對于任何閱讀源代碼的開發(fā)人員來說都可能有點混亂，但它確實給了我很大的靈活性。

壓縮內(nèi)聯(lián)HTML

我為HTML縮小做了完全相同的事情。這個html-minifier軟件包非常整齊，我玩弄了一些理想的默認設(shè)置，運行良好。

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 的自定義腳本，最后它執(zhí)行ES6縮小操作，并確保用于分發(fā)和包含的文件盡可能小。

"scripts": {

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

}

將它整合到我的博客中

我打算寫一篇關(guān)于部署Web組件的咆哮，但最后它非常簡單。

1.從我的項目中安裝元素。

npm install sharebutton --save

2.將它添加到我的構(gòu)建部署中。

install:

- npm install

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

下一步是什么？

我認為這是值得的。該元素現(xiàn)在是7917字節(jié)與11700字節(jié)，大約減小了33％（gzip，與2742比較是2792字節(jié)），所以我現(xiàn)在很高興（盡管我認為我可以做得更好）。我現(xiàn)在也有一個可以用于其他元素的進程，并且所有內(nèi)容都封裝在這個包中。

我支持自己進入一個角落，選擇內(nèi)聯(lián)CSS和HTML，但我仍然認為這是構(gòu)建自定義元素的最佳解決方案。

這里介紹的解決方案將在縮小元素方面做得很好，但是它不會做得很好，例如，因為自定義元素對外部元素不透明，所以我可以在縮小CSS選擇器，ID等方面做得更好。 。但CSS，HTML和JS沒有足夠的耦合度，足以讓我有信心做到這一點。

我很樂意在這個過程中得到你的想法，如果你做了類似的事情，并有更好的結(jié)果。

紹

JSS是CSS的創(chuàng)作工具，它允許你使用JavaScript以聲明，無沖突和可重用的方式描述樣式。它可以在瀏覽器，服務(wù)器端或在構(gòu)建時在Node中編譯。JSS與框架無關(guān)。它由多個包組成：核心部分，插件以及框架集成等。

Github

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

快速開始

如果你已經(jīng)對使用JSS感興趣，可以使用在線代碼編輯器。在CodeSandbox（一個非常實用的在線編輯器，可以用來學(xué)習(xí)各種編程技能）上嘗試Hello World示例。以下是三種不同框架下的用法（代碼圖片生成自carbon網(wǎng)站）：

• JSS

• React-JSS

• Styled-JSS

特性

• 真實的CSS

JSS生成實際的CSS，而不是內(nèi)聯(lián)樣式。它支持每個現(xiàn)有的CSS功能。CSS規(guī)則只創(chuàng)建一次，并使用其類名與元素重復(fù)使用，與內(nèi)聯(lián)樣式相反。此外，當DOM元素更新時，將應(yīng)用先前創(chuàng)建的CSS規(guī)則。

• 無沖突選擇器

JSS默認生成唯一的類名。它允許避免典型的CSS問題，默認情況下一切都是全局的。它完全消除了命名約定的需要。

• 代碼重用

使用JavaScript作為宿主語言使我們有機會以常規(guī)CSS無法實現(xiàn)的方式重用CSS規(guī)則。您可以利用JavaScript模塊，變量，函數(shù)，數(shù)學(xué)運算等。如果做得好，它仍然可以完全聲明。

• 易于拆卸和修改

CSS規(guī)則的明確使用允許您跟蹤消費者并確定是否可以安全地刪除或修改它。

• 動態(tài)Style

使用JavaScript函數(shù)和Observable可以在瀏覽器中動態(tài)生成樣式，使有機會訪問應(yīng)用程序狀態(tài)，瀏覽器API或遠程數(shù)據(jù)以進行樣式設(shè)置。你不僅可以定義一次樣式，還可以在任何時間點以有效的方式更新樣式。

• 用戶控制的動畫

JSS可以高效地處理CSS更新，可以使用它創(chuàng)建復(fù)雜的動畫。使用函數(shù)值，Observables并將它們與CSS過渡相結(jié)合，可以為用戶控制的動畫提供最大的性能。對于預(yù)定義的動畫，使用@keyframes和transition更好，因為它們將完全取消阻止JavaScript線程。

• 關(guān)鍵的CSS

要優(yōu)化第一次繪制的時間，你可以使用服務(wù)器端渲染并提取關(guān)鍵CSS。可以將CSS的呈現(xiàn)與HTML的呈現(xiàn)結(jié)合起來，這樣就不會生成未使用的CSS。它將導(dǎo)致在服務(wù)器端呈現(xiàn)期間提取的最小關(guān)鍵CSS，并允許內(nèi)聯(lián)它。

• 插件

JSS核心實現(xiàn)了基于插件的架構(gòu)。它允許您創(chuàng)建可以實現(xiàn)自定義語法或其他強大功能的自定義插件。JSS有許多官方插件，可以單獨安裝或使用默認預(yù)設(shè)。社區(qū)插件的一個很好的例子是jss-rtl。

• Expressive 語法

由于各種插件，JSS允許您使用現(xiàn)有的全局類名來嵌套，全局選擇器和組合。例如，允許您以比CSS更可讀的方式表達屬性。如果要直接從瀏覽器開發(fā)工具復(fù)制粘貼樣式，也可以使用模板字符串。jss-plugin-expandbox-shadow

• 完全隔離

另一個有用的插件示例是，它允許您完全隔離元素與全局級聯(lián)規(guī)則，并可能覆蓋不需要的屬性。在創(chuàng)建應(yīng)該在第三方文檔內(nèi)部呈現(xiàn)的窗口小部件時尤其有用。jss-plugin-isolate

• React整合。

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

1. 動態(tài)主題 - 允許基于上下文的主題傳播和運行時更新。
2. 關(guān)鍵CSS提取 - 僅提取渲染組件中的CSS。
3. 延遲評估 - 樣式表在組件安裝時創(chuàng)建。
4. 樣式表的靜態(tài)部分在所有元素之間共享。
5. 使用props作為參數(shù)自動更新函數(shù)值和規(guī)則。

• JavaScript構(gòu)建管道

CSS不需要額外的構(gòu)建管道配置。無論你選擇構(gòu)建JavaScript的工具是什么，它都可以與JSS一起使用。

安裝使用

yarn add jss

yarn add jss-preset-default //使用默認設(shè)置

import jss from 'jss'
import preset from 'jss-preset-default'
jss.setup(preset())
// 創(chuàng)造你的style.
const style = {
 myButton: {
 color: 'green'
 }
}
//編譯樣式，應(yīng)用插件。
const sheet = jss.createStyleSheet(style)
//如果要在客戶端上呈現(xiàn)，請將其插入DOM。
sheet.attach()
//如果要渲染服務(wù)器端，請獲取CSS文本。
sheet.toString()

• 使用自定義插件進行設(shè)置

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'
 }
}
//編譯樣式，應(yīng)用插件。
const sheet = jss.createStyleSheet(style)
// 如果要在客戶端上呈現(xiàn)，請將其插入DOM
sheet.attach()
// 如果要渲染服務(wù)器端，請獲取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節(jié)點，可以作為插入點。
 </div>
</body

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

簡單案例

通過兩張圖片來體驗：

總結(jié)

JSS的功能是十分強大的，不僅僅讓寫css的方式放到了JavaScript，這樣對更加喜愛編寫javascript的小伙伴來說是值得嘗試的，而且還支持服務(wù)器端渲染等更多高級的特性，前端技術(shù)百花齊放，但目前仍然不變的是掌握JavaScript者得天下的時代！