chrome извлечение отчета о покрытии как часть процесса сборки - PullRequest
Новая
       12

chrome извлечение отчета о покрытии как часть процесса сборки

0 голосов
/ 12 марта 2020

в chrome вы можете сгенерировать отчет о покрытии из используемых css и js, как я могу получить этот отчет в процессе сборки, чтобы автоматически разделить и загрузить мои файлы соответственно? (отчет о покрытии без какого-либо взаимодействия с сайтом).

1 Ответ

1 голос
/ 16 марта 2020

Не думайте, что эта практика полезна, я объясню:

, если вы используете контент Dynami c, это нарушит стилизацию ваших элементов Dynami c или ваших Dynami. c самих элементов.

Лучший способ, который я нашел для решения этой проблемы, - это использовать parcel js в качестве диспетчера пакетов и правильно установить js и s css в каждом. html для каждого Компонент на ваш взгляд. Это создаст «витальное дерево» стилей для каждого вида и создаст вставку js и css для каждого вида. Конечно, вы можете получить дополнительные css и js, в зависимости от ваших потребностей и ваших лучших практик.

  • Для динамического c контента: если вы видите, что Если вы можете динамически создать элемент, вам нужно предварительно загрузить его js и css вместе с остальными css и js, даже если пользователь не взаимодействует с элементом, который будет динамически создавать этот другой элемент.

  • Для содержимого stati c: если вы работаете с содержимым stati c, то отправьте. js и напишите свои css и js специально для каждого вид будет путь к go. Нет смысла отказываться от покрытия и брать то, что вам нужно сейчас, так как вы можете работать с лучшими практиками во время разработки.

Если вы все равно хотите это сделать, вы можете сделать это с puppeteer (npm i puppeteer --save). 

  (async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage()

  //Start sending raw DevTools Protocol commands are sent using `client.send()`
  //First off enable the necessary "Domains" for the DevTools commands we care about
  const client = await page.target().createCDPSession()
  await client.send('Page.enable')
  await client.send('DOM.enable')
  await client.send('CSS.enable')

  const inlineStylesheetIndex = new Set();
  client.on('CSS.styleSheetAdded', stylesheet => {
    const { header } = stylesheet
    if (header.isInline || header.sourceURL === '' || header.sourceURL.startsWith('blob:')) {
      inlineStylesheetIndex.add(header.styleSheetId);
    }
  });

  //Start tracking CSS coverage
  await client.send('CSS.startRuleUsageTracking')

  await page.goto(`http://localhost`)
  // const content = await page.content();
  // console.log(content);

  const rules = await client.send('CSS.takeCoverageDelta')
  const usedRules = rules.coverage.filter(rule => {
    return rule.used
  })

  const slices = [];
  for (const usedRule of usedRules) {
    // console.log(usedRule.styleSheetId)
    if (inlineStylesheetIndex.has(usedRule.styleSheetId)) {
      continue;
    }

    const stylesheet = await client.send('CSS.getStyleSheetText', {
      styleSheetId: usedRule.styleSheetId
    });

    slices.push(stylesheet.text.slice(usedRule.startOffset, usedRule.endOffset));
  }

  console.log(slices.join(''));

  await page.close();
  await browser.close();
})();

Источник

...