Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
PuppeteerでいらないCSSを消す
Hiroyuki ANAI
June 19, 2019
Programming
24
24k
PuppeteerでいらないCSSを消す
@pirosikick の発表資料です。
https://mentaico-js.connpass.com/event/132416/
Hiroyuki ANAI
June 19, 2019
Tweet
Share
More Decks by Hiroyuki ANAI
See All by Hiroyuki ANAI
Go言語による並行処理「4.4 orチャネル」の図
pirosikick
0
160
サイボウズWebフロントエンド脱レガシーの今までとこれから
pirosikick
5
14k
@cybozu/eslint-configから学ぶ、全社共通ESLint configの運用
pirosikick
4
1.3k
Web Share Target API #w3fukuoka
pirosikick
0
440
Google I/O '19のWebをまとめる会
pirosikick
2
640
Progressive Hydration #react_fukuoka
pirosikick
5
1.2k
WebFEのテストにおける気持ちの変遷
pirosikick
0
300
私が考えるReactのよさ #fukuokajs
pirosikick
2
580
Reduxの細かい話 #react_fukuoka
pirosikick
0
600
Other Decks in Programming
See All in Programming
MLOps勉強会_20220810
strsaito
1
360
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
maroon1st
0
13k
パスワードに関する最近の動向
kenchan0130
1
330
Rust on Lambda 大きめCSV生成
atsuyokota
1
400
atama plusの開発チームはどのように「不確実性」に向き合ってきたか〜2022夏版〜
atamaplus
3
610
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
syumai
0
150
夕食断食にTRY!/for-lt-12th
pachikuriii
0
240
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
uggds
32
13k
それ全部エラーメッセージに書いてあるよ!〜独学でPHPプログラミングが上達するたった一つの方法〜
77web
1
150
Carp言語さわってみた 〜鯉を取り戻せ編〜
tsin45
0
100
RustのWebフレームワーク周りの概観
hayao
0
180
Rector, time to refactor your code easily
guikingone
2
150
Featured
See All Featured
Building Your Own Lightsaber
phodgson
95
4.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
The Invisible Side of Design
smashingmag
290
48k
Producing Creativity
orderedlist
PRO
334
37k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
6k
Statistics for Hackers
jakevdp
782
210k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.3k
Transcript
͍Βͳ͍$44Λ 1VQQFUFFSͰফ͢ !QJSPTJLJDL 8FC (PPHMF*0ͷ8FCΛ·ͱΊΔձ
ࣗݾհ w !QJSPTJLJDL w αΠϘζגࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜ w طʹ͝ଘͩͱࢥ͍·͕͢ɺ ࡢɺঁ͕࢈·Ε·ͨ͠!
࠷͍ۙͬͯΔࣄ w ڊେͳ$44ͷTUZMFEDPNQPOFOUTԽ w ສߦ͋Δ͕ɺશͯͷελΠϧ͕ඞཁͳΘ͚Ͱͳ͍ w ͦͷଞͷ w NJODTTͱ͍͏֦ுࢠͳͷʹѹॖ͞Ε͍ͯͳ͍ w
CPPUTUSBQGPOUBXFTPNFͷελΠϧΛ্ॻ͖͍ͯ͠Δ w ৄࡉ͕ߴ͗͢ΔελΠϧ͕݁ߏ͋ΔFUD
Ͳ͏ઓ͑Α͍ͷ͔ Θ͔ΒΜ
.PEFSO8FC5FTUJOHBOE"VUPNBUJPOXJUI1VQQFUFFS IUUQTXXXZPVUVCFDPNXBUDI W.CO"5-$V,* 1VQQFUFFSͰ +4ɾ$44ͷΧόϨοδ͕ औΕ·͢
͜ͷػೳΛ͑ ͬͯͳ͍ελΠϧΛ ୳͠ग़ͤΔͷͰʁ
1VQQFUFFSͰ $44ͷΧόϨοδΛऔಘ const puppeteer = require('puppeteer'); (async () => {
// ブラウザの起動 const browser = await puppeteer.launch(); const page = await browser.newPage(); // カバレッジの収集を開始 await page.coverage.startCSSCoverage(); // カバジッジを取りたいページを徘徊 await page.goto(…); … // カバレッジの収集を終了 const cssCoverage = await page.coverage.stopCSSCoverage(); … })();
QVQQFUFFSUPJTUBOCVMͰ OZD͕ॲཧՄೳͳϑΥʔϚοτʹม const pti = require('puppeteer-to-istanbul'); // .nyc_output/*を生成 pti.write(cssCoverage);
)5.-ܗࣜͷϨϙʔτΛੜ w OQYOZDSFQPSUSFQPSUFSIUNM w DPWFSBHFҎԼʹ)5.-Λग़ྗ w PQFODPWFSBHFJOEFYIUNM
εΫγϣషΔ
खಈͰফ͢ͷਏͦ͏ ΧόϨοδ͔ΒࣗಈͰ ফͤͳ͍͔ʁ
OZD@PVUQVUͷத w PVUKTPO w ֤ϑΝΠϧͷΧόϨοδใ w KT DTTKT w $44ϑΝΠϧͦͷͷ
w ֦ுࢠ͕KTʹͳ͍ͬͯΔͷṖ
OZD@PVUQVUPVUKTPOͷ TϑΟʔϧυ͕͑ͦ͏ // .nyc_output/out.jsonの構造 { "ファイルパス": { "path": "ファイルパス", "s":
{ "行数": 0 or 1 // 1の場合、カバレッジ有り … }, … }, … }
ෆཁͳߦΛফ͢ॲཧʢΠϝʔδʣ const fs = require('fs'); const readline = require('readline'); //
out.jsonのsフィールドから不要な行を消す処理のイメージ const removeUnusedLines = (filePath, s) => new Promise(resolve => { const reader = readline.createInterface({ input: fs.createReadStream(filePath) }); let currentLine = 0; const lines = []; // ファイルから1行ずつ読む reader.on('line', line => { // カバレッジがある行を残す if (s[currentLine++]) { lines.push(line); } }); reader.on('close', () => resolve(lines)); });
݁Ռ w ΧόϨοδ͕͔͠ͳ͔ͬͨ w ສߦˠߦ w ·ͩଟ͍͕ΪϦΪϦઓ͑Δߦʹͳͬͨ
ϋϚͬͨͱ͜Ζ
QBHFHPUPͷͨͼʹ ΧόϨοδ͕Ϧηοτ͞ΕΔ w ҎԼͷΑ͏ʹରॲ w HPUPຖʹΧόϨοδΛੜ w QUPJXSJUFҰͭͷΧόϨοδ͔͠ड͚͚ͳ͍ͷͰ w ෳͷΧόϨοδΛϚʔδͯ͠
ҰͭͷΧόϨοδΛੜ
QVQQFUFFS͕ग़ྗ͢Δ ΧόϨοδͷߏ [ { url: "ファイルのURL", text: "ファイルの中身", ranges: [
// カバレッジの開始位置・終了位置の配列 { start: 0, end: 100 }, … ] }, … ]
ෳͷΧόϨοδΛϚʔδ { url: "ファイルA", text: "…", ranges: [ { start:
0, end: 100 }, { start: 201, end: 300 } ] } { url: "ファイルA", text: "…", ranges: [ { start: 101, end: 200 }, { start: 250, end: 350 } ] } ΧόϨοδͦͷ ΧόϨοδͦͷ { url: "ファイルA", text: "…", ranges: [ { start: 0, end: 100 }, { start: 101, end: 200 }, { start: 201, end: 350 } ] }
ΧόϨοδ͕ൃੜ͠ͳ͍ w !NFEJBએݴɺ!GPOUGBDFએݴʹ ΧόϨοδ͕ൃੜ͠ͳ͍ w *TTVFʹొ͞Ε͍͕ͯͨόά͔༷͔͔Βͳ͍ w ҎԼͷΑ͏ʹରॲ w !GPOUGBDFએݴΧόϨοδ͋Γͳؔ͠ΘΒͣ͢
w !NFEJBએݴͷελΠϧʹΧόϨοδ͕͋Δ߹ ͢
͓ΘΓ w 1VQQFUFFS&&ςετҎ֎ͷ͍ํͰ͖Δʂ w ࠷ऴతʹεΫγϣΛऔ͓͍ͬͯͯ ը૾ࠩΛग़ͤΔΑ͏ʹͯ͠ΑΓ࣮֬ʹෆཁͳελΠϧΛ ফͤΔΑ͏ʹͨ͠
͋Γ͕ͱ͏ ͍͟͝·ͨ͠