前言

最近采用webpack5配置了一个项目脚手架。当项目开发完成后，采用lighthouse进行性能测试时发现有一张图片影响LCP评分，所以需要解决这个问题。

LCP

最大内容绘制 (LCP) 是核心 Web 指标中的一项指标，用于测量可视区域中最大内容元素变为可见的时间点。该项指标可用于确定页面主要内容在屏幕上完成渲染的时间点。

本项目经过实测发现以下问题：

/assets/top-8face.png

所以这个图片影响LCP需要优化，怎么做？这里给出了preload的建议，只要在html head标签内加上一句即可

  <link href="assets/top-8face.png" rel="preload" as="image">

至此完成了该项优化。

但是，事情可能没有那么简单，万一图片换了，top-[hash]变了呢？或者随着项目迭代，删除了这张图片，然后这个preload link很可能继续存在html里面，就会显得多余。万一影响LCP的不是图片，可以是p标签包裹的一大段文案或者是某个video、svg内嵌的image呢？万一项目是动态配置的多入口MPA呢？

所以此时虽然可以手动写上一句就解决当前的问题，但是为了可维护性，从工程化角度来看，更应该是用工程化的手段来解决此类问题。

先看看有没有现成的preload插件，找到一个vue官方维护的 @vue/preload-webpack-plugin, 但是这个插件默认把所有输出的资源都生成preload link，在输出资源比较多且没有开启http2时候，这其实是一种反向优化的手段。经过尝试配置和阅读它的源码，发现并不能满足我的需求，我只要一个preload link就行了，所以自己写一个吧。

webpack插件实现新增preload link插入到html文件

梳理一下本插件要做的事情：
我们希望拿到名叫top-[hash].png的图片，有则组装一个preload link插入到html里面，没有则啥也不做

在我的另外一篇文章【webpack进阶系列】plugin的原理探究 介绍过了插件原理与应用，参考官网示例现在我们可以直接在processAssets钩子里面配合stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE拿到所有资源assets，找出LCP图片和html文件，组装preload link插入到html文件，然后生成新的html。
代码如下：

preload-lcp-img-webpack-plugin.js

/**
 * 根据lighthouse的建议，有一张图片：top-[hash].png影响LCP, 所以需要预加载这张影响LCP的图片，此插件仅适用此场景
 */
const defaultOptions = {
  htmlFile: 'index.html'
}
class PreloadLCPImgWebpackPlugin {
  constructor(options = {}) {
    this.options = { ...defaultOptions, ...options }
  }

  apply(compiler) {
    const pluginName = 'PreloadLCPImgWebpackPlugin'
    const { webpack } = compiler
    const { Compilation } = webpack
    const { RawSource } = webpack.sources

    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
      // 绑定到资源处理流水线(assets processing pipeline)
      compilation.hooks.processAssets.tap(
        {
          name: pluginName,
           // 用某个靠后的资源处理阶段， 确保所有资源已被插件添加到 compilation
          stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
        },
        (assets) => {
          const lcpImg = Object.keys(assets)
            .filter(filename => /.png$/i.test(filename)) // 图片
            .find((filename) => {
              const arr = filename.split('/')
              const name = arr[arr.length - 1]
              return /^top/.test(name) // top-[hash].png就是影响LCP的图片
            })

          if (!lcpImg) return

          const webpackPublicPath = compilation.outputOptions.publicPath
          // webpack 5 set publicPath default value 'auto'
          const publicPath = webpackPublicPath.trim() !== '' && webpackPublicPath !== 'auto' ? webpackPublicPath : ''

          const html = assets[this.options.htmlFile]._value
          const preloadLink = `<link href="${publicPath}${lcpImg}" rel="preload" as="image">`
          const newHtml = html.replace('</head>', `${preloadLink}</head>`)

          delete assets[this.options.htmlFile] // 删除，下面再重新生成
          compilation.emitAsset(
            this.options.htmlFile,
            new RawSource(newHtml)
          )
        }
      )
    })
  }
}

module.exports = PreloadLCPImgWebpackPlugin

在webpack.config.js中production环境使用插件

const PreloadLCPImgWebpackPlugin = require('./webpack-plugins/preload-lcp-img-webpack-plugin')
// ...省略其他代码
if(isProduction) {
  config.plugins.push(
    new PreloadLCPImgWebpackPlugin(), // 预加载LCP图片
  )
}

效果

优化后的LCP.png 没有LCP建议了.png

总结

webpack插件可以通过注册webpack的compiler、compilation实例的hook在特定的时机去【增加、删除、改变】内部的资源信息，最终可能影响构建输出。要写插件不难，难的是webapck里面几百个hook该用哪些hook，什么时机去做，能做什么事情，这个过程只能多参考其他插件的写法或者阅读源码。