如何在Webpack 5搭建的React项目中使用web3并解决编译报错

报错原因 #

Webpack 5 相比4及更早版本，移除了默认内置的Node.js核心模块polyfill，打包运行在浏览器端的代码时，不会自动为依赖Node原生核心模块的第三方库做兼容补全。而web3库最初是为Node.js环境设计，内部依赖了stream、crypto、http、os等大量Node.js核心模块，直接在前端项目中引入时，Webpack找不到对应模块就会抛出缺失报错。
另外web3属于项目运行时依赖，不应该安装到devDependencies中，后续可以重新执行npm install web3 --save调整依赖分类，避免部署时出现依赖缺失问题。

解决方法 #

• 第一步：先安装所需的所有polyfill依赖
  执行命令：
  npm install stream-browserify crypto-browserify assert stream-http https-browserify os-browserify url buffer process

• 第二步：修改项目的webpack.config.js配置，新增fallback模块映射和全局变量注入：

const webpack = require('webpack');

module.exports = {
  // 原有配置（entry、output、module规则、已有插件等全部保留）
  resolve: {
    fallback: {
      "stream": require.resolve("stream-browserify"),
      "crypto": require.resolve("crypto-browserify"),
      "assert": require.resolve("assert/"),
      "http": require.resolve("stream-http"),
      "https": require.resolve("https-browserify"),
      "os": require.resolve("os-browserify/browser"),
      "url": require.resolve("url/"),
      "buffer": require.resolve("buffer/"),
      // 如果后续提示fs、path模块缺失，直接添加下方配置忽略即可，前端环境无需这两个模块
      "fs": false,
      "path": false
    }
  },
  plugins: [
    // 原有插件（HtmlWebpackPlugin、CompressionWebpackPlugin等全部保留）
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ]
}

修改完成后重新执行npm run dev或者npm run build即可正常编译。

Webpack包体积优化可行性 #

该方案完全可行，Webpack本身就是为前端模块化打包和性能优化设计的工具，针对你的场景可以通过以下方式实现体积优化：

• 生产模式默认开启tree shaking、代码压缩、死代码剔除能力，已经可以大幅减少打包后体积
• 你已经安装的compression-webpack-plugin可以生成gzip/brotli格式的压缩包，配合服务器开启对应压缩传输，可减少60%-80%的资源传输体积
• 配置optimization.splitChunks规则，将react、react-dom、web3等变动频率极低的第三方依赖单独拆分打包，和业务代码隔离，用户访问时可长期缓存公共依赖包，避免重复加载
• 若无需使用web3的完整能力，可改为按需导入web3子模块，或是替换为更轻量的同类库如ethers.js，可进一步减少依赖体积
• 新增资源压缩规则，对图片、字体等静态资源做压缩处理，小体积资源可转base64内联到代码中，减少请求数的同时降低总资源体积

内容的提问来源于stack exchange，提问作者Alessandro Sbenaglia