使用 esbuild 将项目打包速度提升 9 倍

// builder.js
const fs = require('fs-extra')
const { build } = require('esbuild')

const esbuildParams = {...}

async function main() {
  fs.removeSync('./build')

  const builder = await build(esbuildParams)
  handleAssets()

  process.exit(0)
}

main()

// 复制 public 中的静态文件到 build 目录中
function handleAssets() {
  fs.copySync('./public', './build')
  buildHtml('./public/index.html', './build/index.html')
}

// 修改 html 文件，替换变量
function buildHtml(inputFilename, outputFilename) {
  let result = fs.readFileSync(inputFilename).toString()

  const placeholders = ['PUBLIC_URL']
  placeholders.forEach((key) => {
    result = result.replace(new RegExp(`%${key}%`, 'g'), process.env[key])
  })

  fs.writeFileSync(outputFilename, result)
}

const isDev = process.env.NODE_ENV !== 'production'

// handle .env
if (isDev) {
  fs.copyFileSync('./.env.development', './.env')
} else {
  fs.copyFileSync('./.env.production', './.env')
}
// load .env file
require('dotenv').config()

const esbuildParams = {
  color: true,
  entryPoints: {
    dashboardApp: 'src/index.ts',
    diagnoseReport: 'diagnoseReportApp/index.tsx',
  },
  loader: { '.ts': 'tsx', '.svgd': 'dataurl' },
  outdir: 'build',
  minify: !isDev,
  format: 'esm',
  bundle: true,
  sourcemap: true,
  logLevel: 'error',
  incremental: true,
  splitting: true,
  platform: 'browser',
  plugins: [
    postCssPlugin.default({
      lessOptions: {
        modifyVars: lessModifyVars,
        globalVars: lessGlobalVars,
        javascriptEnabled: true,
      },
      enableCache: true,
    }),
    yamlPlugin(),
    svgrPlugin(),
  ],
  define: genDefine(),
  inject: ['./process-shim.js'], // fix runtime crash
}

entryPoints: {
  dashboardApp: 'src/index.ts',
  diagnoseReport: 'diagnoseReportApp/index.tsx',
}

splitting: true,
format: 'esm',

<script type="module" src="%PUBLIC_URL%/dashboardApp.js"></script>

const esbuildParams = {
  ...
  define: genDefine()
  ...
}

function genDefine() {
  const define = {}
  for (const k in process.env) {
    if (k.startsWith('REACT_APP_')) {
      let envVal = process.env[k]
      // Example: REACT_APP_VERSION=$npm_package_version
      // Expect output: REACT_APP_VERSION=0.1.0
      if (envVal.startsWith('$')) {
        envVal = process.env[envVal.substring(1)]
      }
      define[`process.env.${k}`] = JSON.stringify(envVal)
    }
  }
  return define
}

const version = process.env.REACT_APP_VERSION

const version = '0.1.0'

// builder.js
const esbuildParams = {
  ...
  inject: ['./process-slim.js']
  ...
}

// process-shim.js
export let process = {
  cwd: () => '',
  env: {},
}

const esbuildParams = {
  ...
  platform: 'browser',
  ...
}

// package.json
{
  ...
  "browser": {
    "path": "path-browserify"
  }
  ...
}

const postCssPlugin = require('@baurine/esbuild-plugin-postcss3')
const { yamlPlugin } = require('esbuild-plugin-yaml')
const svgrPlugin = require('esbuild-plugin-svgr')

const esbuildParams  = {
  ...
  plugins: [
      postCssPlugin.default({
        lessOptions: {
          modifyVars: lessModifyVars,
          globalVars: lessGlobalVars,
          javascriptEnabled: true,
        },
      }),
      yamlPlugin(),
      svgrPlugin(),
    ],
  ...
}

const esbuildParams = {
  ...
  loader: { '.ts': 'tsx', '.svgd': 'dataurl' },
  ...
}

// signin/index.tsx
import landing from './landing.svgd'
const landingSVG = landing.replace('data:text/plain', 'data:image/svg+xml')

          <div
            style={{ backgroundImage: `url(${landingSVG})` }}
            className={styles.landing}
          />

// src/react-app-env.d.ts
declare module '*.svgd' {
  const src: string
  export default src
}

const { start } = require('live-server')
const { watch } = require('chokidar')

async function main() {
  fs.removeSync('./build')

  const builder = await build(esbuildParams)
  handleAssets()

  if (isDev) {
    start(devServerParams)

    const tsConfig = require('./tsconfig.json')
    tsConfig.include.forEach((folder) => {
      watch(`${folder}/**/*`, { ignoreInitial: true }).on('all', () => {
        builder.rebuild()
      })
    })
    watch('public/**/*', { ignoreInitial: true }).on('all', () => {
      handleAssets()
    })
  }
  ...
}

const dashboardApiPrefix =
  process.env.REACT_APP_DASHBOARD_API_URL || 'http://127.0.0.1:12333'

const devServerPort = process.env.PORT

const devServerParams = {
  port: devServerPort,
  root: 'build',
  open: '/dashboard',
  // Set base URL
  // https://github.com/tapio/live-server/issues/287 - How can I serve from a base URL?
  proxy: [['/dashboard', `http://127.0.0.1:${devServerPort}`]],
  middleware: isDev && [
    function (req, _res, next) {
      if (/\/dashboard\/api\/diagnose\/reports\/\S+\/detail/.test(req.url)) {
        req.url = '/diagnoseReport.html'
      }
      next()
    },
    createProxyMiddleware('/dashboard/api/diagnose/reports/*/data.js', {
      target: dashboardApiPrefix,
      changeOrigin: true,
    }),
  ],
}

proxy: [['/dashboard', `http://127.0.0.1:${devServerPort}`]]

let cache = new Map()
// cache = {
//   'srcPath': {
//     lastMtimeMs: 1634030364414,
//     output: ''
//   }
// }

...

// query cache
let cacheVal = cache.get(sourceFullPath)
if (cacheVal && cacheVal.lastMtimeMs === stat.mtimeMs) {
  tmpFilePath = cacheVal.output
}

...

// update cache
cache.set(sourceFullPath, {
  lastMtimeMs: stat.mtimeMs,
  output: tmpFilePath,
})