⚡ 优化 webpack 开发体验以及依赖预编译方案

// ========== 仅 webpack5 + inner cache system
首次编译耗时:
setup 85ms
building 97921ms
sealing 3279ms
emitting 393ms
二次编译耗时:
setup 27ms
building 11231ms
sealing 1351ms
emitting 70ms
// ========== 配置 prebundle 机制
无缓存编译 49s
二次编译 10s
三次编译 10s
// ========== 将 prebundle 同步到另一台机器
带缓存编译 12s
二次编译 10s
二次编译 10s

// 决定了编译和收集器从哪开始
const entries = paths.appIndexJs.map((p) => p.path);
const appPath = paths.appPath;

await Promise.all(entries.map(entry => esbuild.build({
  absWorkingDir: appPath,
  entryPoints: [entry],
  bundle: true,
  write: false, // 只是分析引用关系，不需要真的写入磁盘
  format: 'esm',
  plugins: [ scanImportsPlugin ]
})));
const scanImportsPlugin = {
  name: 'scanImports',
  setup(build) {
    // 确认不需要处理的引用，直接标记外部模块跳过
      build.onResolve(({ filter: new RegExp(`\\.(${[/*[非jsx?tsx?之类]等等*/].join('|')})$`) }), utils.externalModule);  
      // 纯粹的第三方引用，以字母或者@开头，不包含 https://类，不带文件前缀，不带[http,ftp,E:]://类的资源资源
    build.onResolve({ filter: /^[\w@][^:]/ }, async ({ path: id, importer }) => {
      // 已经收集的依赖直接跳过
      if (deps.has(id)) return { path: id, external: true };
      const resolvedPath = await resolve(path.dirname(importer), id);
      if (resolvedPath.includes('node_modules')) {
        // 这是我们最主要关心的地方: 第三方依赖
        if (/\.[jt]sx?$/.test(resolvedPath)) {
          // 用 es-module-lexer（快速词法分析库） 检查 ES 的 exports 语法
          // 但是 "export * from" 语法还是需要单独检查，后续有用
          let fileContent = await fs.promises.readFile(resolvedPath, 'utf8')
          // 获取 es 导出信息，后续用来判定是不是 ems，以及打包的提取方法
          const exportsData = es_module_lexer.parse(fileContent);
          let hasReExports = false;
          for (const { ss, se } of exportsData[0]) {
            const exp = fileContent.slice(ss, se);
            if (/export\s+\*\s+from/.test(exp)) {
              hasReExports = true;
            }
          }
          const hash = utils.getPkgHash(id, resolvedPath);
          // flatten id: 将id中的斜杠替换成下划线
          // 同时也加入缓存 hash
          const flat = utils.flattenId(id);
          const flatId = flat + '_' + hash;
          const moduleMeta = {
            imports: exportsData.imports || [],
            exports: exportsData.exports || [],
            facade: exportsData.facade || false,
            hasReExports: hasReExports,
          }
          let js = '';
          const importsList = moduleMeta.imports;
          const exportsList = moduleMeta.exports;
          // 根据 exportsData 判断是 ES 还是 CommonJS 的模块
          if (!importsList.length && !exportsList.length) {
            /** CommonJS */
            // console.log('rawId cjs -: ', rawId)
            moduleMeta.needInterop = true;
            js = `module.exports = require("${id}")`;
          } else {
            /** ESM */
            if (exportsList.includes('default')) {
              // export default
              js += `import d from "${id}";export default d;`;
            }
            if (hasReExports ||
              exportsList.length > 1 ||
              exportsList[0] !== 'default') {
              // console.log('rawId esm *: ', rawId)
              // export * from 'xx'
              // export const xx
              js += `export * from "${id}";`;
            } else {
              // console.log('rawId esm $: ', rawId)
            }
          }
          deps.set(id, {
            id,
            flatId,
            exposeCode: js,
          });
        }
        // 收集过后直接跳过，不考虑依赖的依赖
        return { path: id, external: true };
      } else if (constant.assetsRE.test(resolvedPath)) {
        return { path: id, external: true };
      } else return { path: resolvedPath };
    });
    // catch all 兜底的引入
    build.onResolve({ filter: /.*/ }, async ({ path: id, importer }) => {
      const resolvedPath = await resolve(path.dirname(importer), id);
      return { path: resolvedPath };
    });
  }
}

deps = [
  {
    id: 'dayjs',
    flatId: 'dayjs_a1fc7db8',
    exposeCode: 'module.exports = require("dayjs")',
  },
  // ...
]

flattenDeps.forEach(dep => {
  const exposePath = path.join(bundlesDir, dep.flatId + '.expose.js')
  if(!fs.existsSync(exposePath)) {
    fs.writeFileSync(exposePath, dep.exposeCode)
  }
})

./react_60f57521.expose.js
./react-dom_ee488318.expose.js
./dayjs_a1fc7db8.expose.js

const webpackConfig = {
    entry: path.join(__dirname, './webpack/index.js'),
    output: {
      path: remoteEntryPath, // 设为 public 目录
      filename: "index.bundle.js",
    },
    // mode: "development",
    // devtool: 'source-map',
    cache: {
      type: 'filesystem',
      cacheDirectory: webpackEntryPath,
      buildDependencies: {
        config: Object.values(exposes)
      }
    },  
    module: {
      rules: [
        {
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          use: [
              {
                loader: require.resolve('esbuild-loader'),
                options: {
                  loader: 'tsx',
                  target: 'esnext',
                },
              },
              {
                loader: require.resolve('./import-to-remote-loader.js'),
                options: {
                  type: 'remote',
                }
              }
            ],
        },
      ]
    },
    plugins: [
      new ModuleFederationPlugin({
        name: "prebundle_remote",
        filename: "remoteEntry.js",
       exposes: exposes, // './dayjs': 'E:\\u-codes\\hola\\static-sites\\node_modules\\.pnpm\\dayjs@1.11.8\\node_modules\\dayjs\\dayjs.min.js'
       // 开发环境，目前不考虑共享依赖，只用了 cjs 和 esm，应该不会出现重复执行的模块
       // shared: ['react', 'react-dom']
      }),
    ]
  }
await new Promise((resolve, reject) => {
    webpack(remoteWebpackConf, (err, stats) => {
      if (err || stats.hasErrors()) {
        reject(err || stats.toJson().errors)
      } resolve()
    })
  })

// output 文件夹将会出现我们所需的文件，根据不同的配置可能目录不同
./remoteEntry.js
./157.index.bundle.js
// mode: "development" 的情况下，不会被压缩处理，文件名也有可读性
./_prebundle_bundles_dayjs_a1fc7db8_js.index.bundle.js

// 直接引用第三方模块
import dayjs from 'dayjs'
// 用联邦模块的方法引入我们之前打包好的，prebundle 是我们的 remote 名称
import dayjs from 'prebundle/dayjs'

// webpack.config.js
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  use: [
    {
      loader: require.resolve('esbuild-loader'),
    },
    {
      loader: require.resolve('./help/prebundle/import-to-remote-loader.js'),
    }
  ]
},

// 通过最简单的正则替换来做，满足使用了目前是
async function PrebundleModuleRenameLoader(source) {
  var flattenDeps = readFlattenDeps()
  if (!flattenDeps) return source
  const regexes = [
    new RegExp(`(require\\(['|"])(.*)(.*?['|"]\\))`, 'g'),
    new RegExp(`(from\\s+['|"])(.*)(.*?['|"])`, 'g')
  ];
  regexes.forEach(reg => {
    let match;
    while (match = reg.exec(source)) {
      const before = match[1];
      const hit = match[2];
      const after = match[3];
      if (flattenDeps.indexOf(hit) > -1) {
        const wrappedTo = `${before}prebundle/${hit}${after}`;
        source = source.replace(match[0], wrappedTo);
      }
    }
  });
  return source
}
exports['default'] = PrebundleModuleRenameLoader;

webpackConf.plugins.push(new ModuleFederationPlugin({
    name: 'ubug_app',
    //远程访问地址入口
    remotes: {
      [prebundleNameID]: prebundleNameID + "@" + url + "/prebundle/remoteEntry.js",
    },
    shared: [{ react: { singleton: true }, 'react-dom': { singleton: true } }],
  }))

webpackConf.plugins.push(VirtualModule)

VirtualModule.apply(compiler);
  appIndexJs.forEach((entry) => {
    const { dir, name } = path.parse(entry.path)
    // remove suffix
    const filePath = path.join(dir, name)
    const originCode = fs.readFileSync(entry.path, { encoding: 'utf-8' })
    const bootPath = `${filePath}.boot.tsx`
    VirtualModule.writeModule(bootPath, originCode)
    const code = 'import("./' + name + '.boot")'
    VirtualModule.writeModule(entry.path, code)
  })