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

【问题标题】：How much does minifying reduce file size?缩小多少会减少文件大小？
【发布时间】：2020-04-23 05:57:40
【问题描述】：

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

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

【问题讨论】：

and I believe it is because code from the dependencies is also minified 不，这是因为依赖项中的代码也包含在包中。所以不清楚“排除所有依赖项......”是什么意思。您可以尝试在打开和关闭缩小的情况下比较捆绑包的大小。或者尝试 webpack 的代码拆分，将你自己的代码放在单独的包中，看看占用了多少空间
虽然它不能直接回答您的问题，但有像 webpack-bundle-analyzer 这样的工具可以分析您的构建包

标签： reactjs webpack minify bundling-and-minification

【解决方案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\2.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

注意括号中的差异。

【讨论】：