缩小文件大小会减少多少？

Question

在 React 应用程序中，是否可以找出 Webpack 的缩小减少了多少项目的大小不包括项目的所有依赖项和包未编写开发人员?

我的 build/static/ 目录目前比我的 src 目录大，我相信这是因为来自依赖项的代码也与感兴趣的文件一起缩小了。我在哪里可以找到大致比较我的 src 目录大小的东西？

Answer 1

我用 npm run build 构建了项目，以了解启用最小化后的输出有多大。

然后我编辑了 node_modules/react-scripts/config/webpack.config.js 并将第 189 行（带有 minimize 属性的行）从：

...
    optimization: {
      minimize: isEnvProduction,
      minimizer: [
...

至：

...
    optimization: {
      minimize: false,
      minimizer: [
...

禁用最小化。

然后再次构建项目，找出没有最小化的大小。

您可以手动比较构建的文件大小以找出它们的差异，但是您在第二次构建时也会在终端得到一个不错的输出：

File sizes after gzip:

  613.36 KB (+504.48 KB)  build\static\js.0ddf8239.chunk.js
  60.24 KB (+20.01 KB)    build\static\js\main.8e9dd59c.chunk.js
  4.73 KB (+457 B)        build\static\css\main.aaaa4d7d.chunk.css
  1.66 KB (+933 B)        build\static\js\runtime~main.7f8cc4df.js

注意括号中所述的差异。

缩小文件大小会减少多少？

How much does minifying reduce file size?

minify

bundling-and-minification

reactjs

webpack