PuppeteerでいらないCSSを消す

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

Transcript

1. ͍Βͳ͍$44Λ

   1VQQFUFFSͰফ͢
   !QJSPTJLJDL
   8FC
   
   (PPHMF*0ͷ8FCΛ·ͱΊΔձ
   

   View Slide

2. ࣗݾ঺հ
   w !QJSPTJLJDL
   w αΠϘ΢ζגࣜձࣾ

   ϑϩϯτΤϯυΤΩεύʔτνʔϜ
   w طʹ͝ଘ஌ͩͱࢥ͍·͕͢ɺ

   ࡢ೔ɺ௕ঁ͕࢈·Ε·ͨ͠!
   

   View Slide

3. ࠷ۙ΍͍ͬͯΔ࢓ࣄ
   w ڊେͳ$44ͷTUZMFEDPNQPOFOUTԽ
   w ສߦ͋Δ͕ɺશͯͷελΠϧ͕ඞཁͳΘ͚Ͱ͸ͳ͍
   w ͦͷଞͷ໰୊
   w NJODTTͱ͍͏֦ுࢠͳͷʹѹॖ͞Ε͍ͯͳ͍
   w CPPUTUSBQ΍GPOUBXFTPNFͷελΠϧΛ্ॻ͖͍ͯ͠Δ
   w ৄࡉ౓͕ߴ͗͢ΔελΠϧ͕݁ߏ͋ΔFUD
   

   View Slide

4. 
   Ͳ͏ઓ͑͹Α͍ͷ͔
   Θ͔ΒΜ
   

   View Slide

5. .PEFSO8FC5FTUJOHBOE"VUPNBUJPOXJUI1VQQFUFFS
   IUUQTXXXZPVUVCFDPNXBUDI W.CO"5-$V,*
   1VQQFUFFSͰ
   +4ɾ$44ͷΧόϨοδ͕
   औΕ·͢
   

   View Slide

6. 
   ͜ͷػೳΛ࢖͑͹
   ࢖ͬͯͳ͍ελΠϧΛ
   ୳͠ग़ͤΔͷͰ͸ʁ
   

   View Slide

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

   View Slide

8. QVQQFUFFSUPJTUBOCVMͰ
   OZD͕ॲཧՄೳͳϑΥʔϚοτʹม׵
   const pti = require('puppeteer-to-istanbul');
   // .nyc_output/*を生成
   pti.write(cssCoverage);
   

   View Slide

9. )5.-ܗࣜͷϨϙʔτΛੜ੒
   w OQYOZDSFQPSUSFQPSUFSIUNM
   w DPWFSBHFҎԼʹ)5.-Λग़ྗ
   w PQFODPWFSBHFJOEFYIUNM
   

   View Slide

10. εΫγϣషΔ
    
    

    View Slide

11. 
    खಈͰফ͢ͷਏͦ͏
    ΧόϨοδ͔ΒࣗಈͰ
    ফͤͳ͍͔ʁ
    

    View Slide

12. OZD@PVUQVUͷத਎
    w PVUKTPO
    w ֤ϑΝΠϧͷΧόϨοδ৘ใ
    w KTDTTKT
    w $44ϑΝΠϧͦͷ΋ͷ
    w ֦ுࢠ͕KTʹͳ͍ͬͯΔͷ͸Ṗ
    

    View Slide

13. OZD@PVUQVUPVUKTPOͷ
    TϑΟʔϧυ͕࢖͑ͦ͏
    // .nyc_output/out.jsonの構造
    {
    "ファイルパス": {
    "path": "ファイルパス",
    "s": {
    "行数": 0 or 1 // 1の場合、カバレッジ有り
    …
    },
    …
    },
    …
    }
    

    View Slide

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));
    });
    

    View Slide

15. ݁Ռ
    w ΧόϨοδ͕໿͔͠ͳ͔ͬͨ
    w ສߦˠߦ
    w ·ͩଟ͍͕ΪϦΪϦઓ͑Δߦ਺ʹͳͬͨ
    

    View Slide

16. ϋϚͬͨͱ͜Ζ
    

    View Slide

17. QBHFHPUPͷͨͼʹ
    ΧόϨοδ͕Ϧηοτ͞ΕΔ
    w ҎԼͷΑ͏ʹରॲ
    w HPUPຖʹΧόϨοδΛੜ੒
    w QUPJXSJUF͸ҰͭͷΧόϨοδ͔͠ड͚෇͚ͳ͍ͷͰ
    w ෳ਺ͷΧόϨοδΛϚʔδͯ͠

    ҰͭͷΧόϨοδΛੜ੒
    

    View Slide

18. QVQQFUFFS͕ग़ྗ͢Δ
    ΧόϨοδͷߏ଄
    [
    {
    url: "ファイルのURL",
    text: "ファイルの中身",
    ranges: [
    // カバレッジの開始位置・終了位置の配列
    { start: 0, end: 100 },
    …
    ]
    },
    …
    ]
    

    View Slide

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 }
    ]
    }
    
    

    View Slide

20. ΧόϨοδ͕ൃੜ͠ͳ͍
    w !NFEJBએݴɺ!GPOUGBDFએݴʹ͸

    ΧόϨοδ͕ൃੜ͠ͳ͍
    w *TTVFʹొ࿥͞Ε͍͕ͯͨόά͔࢓༷͔͸෼͔Βͳ͍
    w ҎԼͷΑ͏ʹରॲ
    w !GPOUGBDFએݴ͸ΧόϨοδ͋Γͳؔ͠ΘΒͣ࢒͢
    w !NFEJBએݴ಺ͷελΠϧʹΧόϨοδ͕͋Δ৔߹͸

    ࢒͢
    

    View Slide

21. ͓ΘΓ
    w 1VQQFUFFS͸&&ςετҎ֎ͷ࢖͍ํ΋Ͱ͖Δʂ
    w ࠷ऴతʹ͸εΫγϣΛऔ͓͍ͬͯͯ

    ը૾ࠩ෼Λग़ͤΔΑ͏ʹͯ͠ΑΓ࣮֬ʹෆཁͳελΠϧΛ
    ফͤΔΑ͏ʹͨ͠
    

    View Slide

22. ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠
    

    View Slide