直接只用 babel 轉(zhuǎn)譯的話，上述的文件都會(huì)通過 babel 轉(zhuǎn)譯一遍，那么這樣對于我們來說并不是合理的，不能因?yàn)闉榱藱z測元素性能而導(dǎo)致頁面構(gòu)建速度變慢嗎?更何況這還不是最優(yōu)解

這時(shí)候我想到了一個(gè)辦法，也是我目前使用的一個(gè)辦法，大家可以看看是否真的是最優(yōu)解，我目前是考慮到這里了：

「通過 webpack plugin 在 build 前，給當(dāng)前模塊添加一個(gè) loader，在當(dāng)前的 loader 內(nèi)去通過 babel 轉(zhuǎn)譯添加 elementtiming」

知道了如何做就開始擼代碼了，下面是調(diào)用方式：

// webpack.config.js 
 
const ElementRenderingWebpackPlugin = require('element-rendering-webpack-plugin') 
module.exports = { 
    plugin: [ 
        new ElementRenderingWebpackPlugin() 
    ] 
} 

plugin 的實(shí)現(xiàn)也比較簡單，主要的工作是在 loader 部分：

// element-rendering-webpack-plugin.js 
 
class MyPlugin { 
  apply(compiler) { 
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => { 
      compilation.hooks.buildModule.tap('SourceMapDevToolModuleOptionsPlugin', module => { 
        if (module.resource) { 
          if (/(\.((j|t)sx?)$)/.test(module.resource) &&  
          !/node_modules/.test(module.resource)) { 
            if (module.loaders) { 
              module.loaders.push({ 
                loader: 'element-rendering-webpack-loader' 
              }) 
            } 
          } 
        } 
      })       
    })   
  } 
} 
module.exports = MyPlugin 

「上面代碼就是在 compilation 生成后，就在模塊 build 前去做模塊的確認(rèn)，只對我自己的業(yè)務(wù)和需要的代碼添加該 loader，這樣就可以繞過上面直接使用 babel 方法導(dǎo)致的構(gòu)建速度問題」

在此要對文件做一些過濾，因?yàn)槭?1.0 的出版，所以還有一些東西沒有完全考慮，還需要繼續(xù)優(yōu)化，這里提示一下暫時(shí)是不支持 vue 使用的，vue 模塊的 loader 太多了，我要多做測試才敢上線，還希望大家體諒

// element-rendering-webpack-loader.js 
 
 
const parser = require('@babel/parser'); 
const traverse = require('@babel/traverse').default; 
const { transformFromAstSync } = require('@babel/core'); 
const t = require('@babel/types'); 
let randomSet = new Set(); 
 
function UpdateAssets(asset) { 
  let code = asset 
  try { 
    const ast = parser.parse(asset, { 
      sourceType: 'module', 
      plugins: [ 
        'flow', 
        'jsx' 
      ] 
    }); 
    traverse(ast, { 
      JSXElement(nodePath) { 
        if (nodePath.node.type === 'JSXElement' && nodePath.node.openingElement.name.name === 'img') { 
          return 
        } 
        updateAttr(nodePath.node); 
      } 
    }) 
    code = transformFromAstSync(ast).code; 
  } catch(e) { 
    console.log(e) 
  } 
  return code; 
} 
 
function updateAttr(node) { 
  if (node.type === 'JSXElement') { 
    let { openingElement, children } = node; 
    let name = openingElement.name.name || openingElement.type 
    let className = openingElement.attributes.filter(attr => { 
      if (attr.type === 'JSXSpreadAttribute') return false 
      return /class(Name)?/.test(attr.name.name) 
    }) 
    if (className.length) { 
      name = className[0].value.value 
    } 
    if (!openingElement) return 
    const elementtimingList = openingElement.attributes.filter(attr => { 
      if (attr.type !== 'JSXSpreadAttribute' && attr.name.name === 'elementtiming') { 
        return true 
      } 
    }) 
    if (!elementtimingList.length) { 
      openingElement.attributes.push(addElementttiming(name + '-' + Math.ceil(Math.random() * 100000))); 
    } 
    const markList = openingElement.attributes.filter(attr => { 
      if (attr.type !== 'JSXSpreadAttribute' && attr.name.name === 'data-mark') { 
        return true 
      } 
    }) 
    if (!markList.length) { 
      openingElement.attributes.push(addMark()); 
    } 
    children.map(childNode => updateAttr(childNode)); 
  } 
} 
 
function addElementttiming(name) { 
  return t.jsxAttribute(t.jsxIdentifier('elementtiming'), t.stringLiteral(name)); 
} 
 
function addMark() { 
  let randomStatus = true; 
  let markRandom = 0; 
  while(randomStatus) { 
    markRandom = Math.ceil(Math.random() * 100000); 
    randomStatus = randomSet.has(markRandom); 
    if (!randomStatus) { 
      randomSet.add(markRandom); 
    } 
  } 
  return t.jsxAttribute(t.jsxIdentifier('data-mark'), t.stringLiteral(markRandom + '')); 
} 
 
module.exports = UpdateAssets; 

這里直接上代碼了，東西太多就不一行一行解釋了，代碼會(huì)開源，鏈接在底部自取慢慢看

「大概做的就是把當(dāng)前跑進(jìn)來的代碼通過 ast 轉(zhuǎn)譯，拿到 ast 對象后添加 elementtiming 屬性，data-mark 是用來做數(shù)據(jù)去重的」

好了，這時(shí)候最基礎(chǔ)的 「捕獲數(shù)據(jù)」 和 「不把性能檢測相關(guān)的代碼植入到業(yè)務(wù)當(dāng)中，實(shí)現(xiàn)上述需求」，那么接下來就該通過瀏覽器插件來展示這些數(shù)據(jù)

通過瀏覽器插件來展示這些數(shù)據(jù)

由于之前是真心沒寫過 chrome-extension ，可踩了不少坑，很多 version 2 可以用的東西 version 3 不支持

這里我直接就上核心部分的代碼了，剩下一些基礎(chǔ)配置類的大家自己到時(shí)候看代碼吧：

// contentScript.js 
 
chrome.runtime.onMessage.addListener(function(request) { 
  const { type, data } = request.data 
  switch(type) { 
    case 'selectedElement': 
      createMask(data) 
      break; 
    case 'cancelElement': 
      cancelMask() 
      break; 
  } 
}) 
 
function createMask(data) { 
  cancelMask() 
  const div = document.createElement('div') 
  Object.keys(data).map(styleKey => div.style[styleKey] = data[styleKey] + 'px') 
  div.style.position = 'absolute' 
  div.style.background = 'rgba(109, 187, 220, 0.5)' 
  div.style.zIndex = '9999' 
  div.id = 'mask-element' 
  document.body.appendChild(div) 
} 
 
function cancelMask() { 
  const maskElement = document.querySelector('#mask-element') 
  if (maskElement !== null) { 
    document.body.removeChild(maskElement) 
  } 
} 
 
function getElementTreeData(element, elementTreeData, performanceElementTimingObj) { 
  let children = element.children 
  for (let i = 0; i < children.length; ++i) { 
    let childElement = children[i] 
    let argObj = {} 
    let nodeValue = '' 
    let parsePerformanceElementTiming = {} 
    if ('elementtiming' in childElement.attributes) { 
      nodeValue = childElement.attributes.elementtiming.nodeValue 
      argObj['elementtiming'] = true 
      argObj['key'] = childElement.dataset.mark 
      let performanceElementTiming = performanceElementTimingObj[argObj['key']] 
      if (performanceElementTiming) { 
        parsePerformanceElementTiming = JSON.parse(JSON.stringify(performanceElementTiming)) 
      } 
    } else { 
      nodeValue = childElement.nodeName 
      argObj['key'] = Math.ceil(Math.random() * 100000) 
    } 
    argObj = Object.assign({}, argObj, parsePerformanceElementTiming, { 
      intersectionRect: childElement.getBoundingClientRect() 
    }) 
    if (/(NO)?SCRIPT/.test(nodeValue)) continue 
    argObj['children'] = childElement.children.length ? getElementTreeData(childElement, [], performanceElementTimingObj) : [] 
    argObj['title'] = nodeValue.replace(/-([0-9]*)$/, '') 
    elementTreeData.push(argObj) 
  } 
  return elementTreeData 
} 
 
let performanceElementTimingList = [] 
const observer = new PerformanceObserver((list) => { 
  let elementTree = [] 
  let performanceElementTimingObj = {} 
  performanceElementTimingList = performanceElementTimingList.concat(list.getEntries()) 
  performanceElementTimingList.map(performanceTimingItem => { 
    if (performanceTimingItem.element !== null) { 
      return performanceElementTimingObj[performanceTimingItem.element.dataset.mark] = performanceTimingItem 
    } 
  }) 
  chrome.runtime.sendMessage( 
    { 
      type: 'performanceTree', 
      data: getElementTreeData(document.body, elementTree, performanceElementTimingObj) 
    } 
  ) 
}); 
observer.observe({ entryTypes: ["element"] }); 

contentScript 是 chrome-extension 內(nèi)訪問頁面元素的一個(gè)配置文件，當(dāng)然文件名自己隨便取，為了方便閱讀和理解，我直接跟著官方文檔的節(jié)奏走的，這里大家可以發(fā)現(xiàn)我上面有一個(gè)方法是 createMark 里面有創(chuàng)建元素和定位，這里是配合 devtools 里面的樹來使用的：

// app.js  
import { useState, useEffect } from 'react'; 
import { Tree } from 'antd'; 
import './App.css'; 
function App() { 
  const [treeData, setTreeData] = useState([])  
  window.addEventListener('message', msg => { 
    const { type, data } = msg.data 
    if (type === 'performanceTree') { 
      setTreeData(data) 
    } 
  }) 
  useEffect(() => { 
  }, [treeData]) 
  return ( 
    <div className="App"> 
      <Tree 
        showLine 
        titleRender={ 
          nodeData => { 
            return ( 
              <div onMouseOver={() => { selectedElement(nodeData) }} onMouseOut={cancelElement}> 
                {nodeData.title}{updateTime(nodeData)} 
              </div> 
            ) 
          } 
        } 
        treeData={treeData} 
      /> 
    </div> 
  ); 
} 
 
function updateTime(nodeData) { 
  let str = ' - ' 
  if (nodeData.renderTime) { 
    str += Math.round(nodeData.renderTime) 
  } else { 
    str += '該元素下非元素外不存在文本' 
  } 
  return str 
} 
 
function selectedElement(nodeData) { 
  console.log('selectedElement') 
  if (!nodeData.disabled) { 
    postMessage( 
      { 
        type: 'selectedElement', 
        data: nodeData.intersectionRect 
      }, 
      '*' 
    ) 
  } 
} 
 
function cancelElement () { 
  console.log('cancelElement') 
  postMessage( 
    { 
      type: 'cancelElement' 
    }, 
    '*' 
  ) 
} 
 
export default App; 

為了頁面的美觀度，我用了 antd 去對頁面ui進(jìn)行優(yōu)化的，當(dāng)點(diǎn)擊某一個(gè)樹的時(shí)候，會(huì)畫一個(gè)框出來，標(biāo)明當(dāng)前元素的時(shí)間和對應(yīng)的元素在哪里：

這就是最后的效果，我是直接 react 腳手架搭完直接安裝的

尾聲

大概的實(shí)現(xiàn)思路和思考的過程，基本上我都描述的差不多了，過程當(dāng)中有很多次想過放棄，但是又不忍心拋棄自己之前的付出所以就堅(jiān)持下來了，也算是做出來的了，但是 elementtiming api 那里那個(gè)問題，還是需要我繼續(xù)研究和解決的，我會(huì)繼續(xù)和 WICG 那邊溝通，爭取可以讓它變得更好

可能有大佬看見會(huì)說這東西很簡單啊，沒什么值得思考地方，那我只想說dddd，我比較菜，得一步一步的學(xué)，你們輕點(diǎn)噴哈

代碼開源了已經(jīng)，歡迎大家互相討論學(xué)習(xí)，也希望大家給點(diǎn)點(diǎn) star，多提 issue，如果有興趣的朋友我還希望大家一起來維護(hù)這個(gè)東西：

plugin: element-rendering-webpack-plugin

loader: element-rendering-webpack-loader

extension: element-rendering-extension