代码分割最佳实践：应用改造示例

const crypto = require('crypto');
const path = require('path');

const MAX_REQUEST_NUM = 20;
// 指定一个 module 可以被拆分为独立 区块（chunk） 的最小源码体积（单位：byte）
const MIN_LIB_CHUNK_SIZE = 10 * 1000;

const isModuleCSS = (module) => {
  return (
    // mini-css-extract-plugin
    module.type === `css/mini-extract` ||
    // extract-css-chunks-webpack-plugin (old)
    module.type === `css/extract-chunks` ||
    // extract-css-chunks-webpack-plugin (new)
    module.type === `css/extract-css-chunks`
  );
};

module.exports = {
  optimization: {
    // https://webpack.js.org/configuration/optimization/#optimizationruntimechunk
    // 指定是否将Webpack的运行时（每个文件中重复的、用于加载的函数）拆分为独立文件，能减少重复代码。
    runtimeChunk: 'single',
    splitChunks: {
      maxInitialRequests: MAX_REQUEST_NUM,
      maxAsyncRequests: MAX_REQUEST_NUM,
      minSize: MIN_LIB_CHUNK_SIZE,
      cacheGroups: {
        defaultVendors: false,
        default: false,
        lib: {
          chunks: 'all',
          test(module) {
            return (
              module.size() > MIN_LIB_CHUNK_SIZE &&
              /node_modules[/\]/.test(module.identifier())
            );
          },
          name(module) {
            const hash = crypto.createHash('sha1');
            if (isModuleCSS(module)) {
              module.updateHash(hash);
            } else {
              if (!module.libIdent) {
                throw new Error(
                  `Encountered unknown module type: ${module.type}. Please check webpack/prod.client.config.js.`,
                );
              }
              hash.update(
                module.libIdent({ context: path.join(__dirname, '../') }),
              );
            }

            return `lib.${hash.digest('hex').substring(0, 8)}`;
          },
          priority: 3,
          minChunks: 1,
          reuseExistingChunk: true,
        },
        shared: {
          chunks: 'all',
          name(module, chunks) {
            return `shared.${crypto
              .createHash('sha1')
              .update(
                chunks.reduce((acc, chunk) => {
                  return acc + chunk.name;
                }, ''),
              )
              .digest('hex')
              .substring(0, 8)}${isModuleCSS(module) ? '.CSS' : ''}`;
          },
          priority: 1,
          minChunks: 2,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

    // src\shared\temp-shared-chunk-example.ts
    import moment from 'moment';

    export function getTime() {
      return moment().format('MMMM Do YYYY, h:mm:ss a');
    }

    // 导入模块 1. src\pages\home\index.tsx
    import { getTime } from '@/shared/temp-shared-chunk-example';

    getTime();


    // 导入模块 2. src\pages\login\index.tsx
    import { getTime } from '@/shared/temp-shared-chunk-example';

    getTime();

// webpack\production.config.js
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

const PUBLIC_PATH = 'http://localhost:3000/';

module.exports = {
  mode: 'production',
  // ...
  plugins: [
    new WebpackManifestPlugin({
      fileName: 'assets-manifest.json',
      generate: (seed, files) => {
        const entrypoints = new Set();
        files.forEach((file) => {
          const chunkGroups = file?.chunk?._groups;
          if (chunkGroups) {
            chunkGroups.forEach((group) => entrypoints.add(group));
          }
        });
        const entries = [...entrypoints];
        const entryArrayManifest = entries.reduce((acc, entry) => {
          const name = entry?.options.name || entry?.runtimeChunk.name;
          const chunks =
            entry?.chunks?.map((chunk) =>
              chunk.files.map((file) => PUBLIC_PATH + file),
            ) || [];
          const allFiles = [].concat(...chunks).filter(Boolean);

          return name ? { ...acc, [name]: allFiles } : acc;
        }, seed);

        return entryArrayManifest;
      },
    }),
  ],
}

    {
      "main": [
        "http://localhost:3000/runtime.8d50d2f1d0dbd9f95dd0.js",
        "http://localhost:3000/lib.a284c5a4.0e5840fc8fe0545c7b7f.js",
        "http://localhost:3000/main.030bb00c221b2a80e00e.css",
        "http://localhost:3000/main.f6360d0de4d842c6d6bc.js"
      ],
      "login": [
        "http://localhost:3000/lib.75fc9c18.d2b04d932876328ce671.js",
        "http://localhost:3000/shared.cc020c28.91c44f0c97414e03e3ae.js",
        "http://localhost:3000/login.18c40a63634cb8fc0422.css",
        "http://localhost:3000/login.2dd91b1f4cd8a0beecaa.js"
      ],
      "profile": [
        "http://localhost:3000/shared.183ce61f.1c528f06dcefa66a9d45.js",
        "http://localhost:3000/profile.16c4eba5c2e58679bc5b.css",
        "http://localhost:3000/profile.d4bf82924e65660a99b7.js"
      ],
      "article": [
        "http://localhost:3000/lib.3ca6b8d4.7ec6d611f235619f5eae.js",
        "http://localhost:3000/article.9803c033314d2ed0ca8e.css",
        "http://localhost:3000/article.0386d08bf2f2bd099618.js"
      ],
      "markdown-to-jsx": [
        "http://localhost:3000/lib.f15b848c.4611e1690d48799809e1.js"
      ]
    }

// 1. 代码分割优化前
<link href="/main.css" rel="stylesheet" type="text/css" />
<button class="btn confirm-btn">Confirm</button>    // 最终前景色为红色（red）

// main.css
.btn {
    color: blue;
}

// main.css
.confirm-btn {
    color: red;
}

// 2. 代码分割优化后 
<link href="/main.css" rel="stylesheet" type="text/css" />
<link href="/btn.css" rel="stylesheet" type="text/css" />
<button class="btn confirm-btn">Confirm</button>    // 最终前景色为蓝色（blue）

// btn.css
.btn {
    color: blue;
}

// main.css
.confirm-btn {
    color: red;
}

styles: {
  test(module) {
    return isCssModule(module)
  },
  name: `styles`,
  priority: 40,
  enforce: true,
},

const resourceTypes = {
    document: 'Document',
    script: 'Script',
    link: 'Link',
    stylesheet: 'Stylesheet',
    img: 'Image',
    media: 'Media',
    font: 'Font',
    xhr: 'XHR',
    fetch: 'Fetch',
    other: 'Other',
};

function checkResourceCacheHit() {
    // ...
    const perfEntries = performance.getEntriesByType('resource');

    for (const entry of perfEntries) {
      // ...
      let hitCache = entry.duration < 50;
      // 新增 type 变量
      const type =
        resourceTypes[resource.initiatorType] || resourceTypes['other'];  

      report(
        'cacheHiteRate',
        { 
            hitCache, 
            name: entry.name,
            type,    // 作为新增的 label 上报到 Grafana
        },
        '缓存命中率计数指标'
      );
    }
}