PuppeteerでいらないCSSを消す

 PuppeteerでいらないCSSを消す

@pirosikick の発表資料です。
https://mentaico-js.connpass.com/event/132416/

Dc52871050369929247b69f3767e8737?s=128

Hiroyuki ANAI

June 19, 2019
Tweet

Transcript

  1. 7.

    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(); … })();
  2. 14.

    ෆཁͳߦΛফ͢ॲཧʢΠϝʔδʣ 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)); });
  3. 18.

    QVQQFUFFS͕ग़ྗ͢Δ ΧόϨοδͷߏ଄ [ { url: "ファイルのURL", text: "ファイルの中身", ranges: [

    // カバレッジの開始位置・終了位置の配列 { start: 0, end: 100 }, … ] }, … ]
  4. 19.

    ෳ਺ͷΧόϨοδΛϚʔδ { 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 } ] }