问题：

我目前正在尝试从此Youtube Tutorial Playlist学习React。这个家伙真的很善于解释框架，不幸的是视频已经过时（2016年）。使用lesson-4 Github branch中的文件，最终 bundle.js文件的大小比我的小得多。

检查两个文件，我可以看到由于他在2016年使用的依赖关系以及在2018年使用的依赖关系，文件大小发生了很大变化。这样一来，构建后，控制台中将显示以下警告消息：

警告资产大小限制：以下资产超出了   建议的大小限制（244 KiB）。这可能会影响网络性能。   资产：bundle.js（248 KiB）

警告入口点大小限制：以下入口点组合   资产大小超出建议的限制（244 KiB）。这可能会影响   网络性能。入口点：主要（248 KiB）         bundle.js

Webpack性能建议中的警告：您可以限制大小   通过使用import（）或require.ensures来确保捆绑包   您的应用程序的各个部分。欲了解更多信息，请访问   https://webpack.js.org/guides/code-splitting/

这是我的webpack.config.js文件：

const path = require('path');

module.exports = {
  "mode": "production",

  entry: path.resolve(__dirname, 'src') + '/app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist') + '/app',
    filename: 'bundle.js',
    publicPath: '/app/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }, {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  }
};

我的/src/app/index.js文件：

const React = require("react");
const ReactDom = require("react-dom");

class TodoComponent extends React.Component {
  render() {
    return (<h1>hello</h1>);
  }
}
ReactDom.render(<TodoComponent/>, document.querySelector(".todo-wrapper"));

我的package.json文件：

{
  "name": "react-tutorial",
  "version": "1.0.0",
  "description": "React tutorial",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
  },
  "author": "me",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.16.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

还有我的/src/index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Tutorial</title>
</head>

<body>
  <div class="todo-wrapper">

  </div>
  <h2>Its working i guess</h2>

<script src="/app/bundle.js"></script>
</body>
</html>

已编译的最终/dist/app/bundle.js文件如下所示： JsFiddle of bundle.js，大小为1.7MB。

我可以看到

的代码部分

./ node_modules / react-dom / cjs / react-dom.development.js

bundle.js内部占用了大部分空间。

解决方案：

阅读这些链接并使用Google后，我发现了以下解决方案：

忽略这些消息，并提示错误
最小化和丑化代码拆分和/或延迟加载代码

解决方案：

由于我刚刚开始学习React和Webpack，所以我对拥有这么大的bundle.js文件和index.js中的两行内容感到不满意。是我错过了一些空白吗？还是这是正常情况下使用React默认情况下这么大，Webpack必须忍受吗？

我真的希望有人能对此有所了解，因为自昨天以来我一直在努力对此保持清醒的态度。如有需要，很高兴提供更多信息。谢谢！

Answer 1

我已经使用并且您已经提到的一种策略是将捆绑包分成单独的文件。

例如，创建一个基础文件，其中包含绘制目标网页所需的所有内容，然后创建单个文件（每个“功能”一个），这些文件可以异步加载，甚至可以按需加载。 >

还应注意，资产捆绑是提高生产代码性能的一种便捷方式。

正如其他人也指出的那样，当您学习React开发的精髓时，资产捆绑（通过webpack或其他策略）实际上是在浪费时间，只会干扰您的既定目标。

Answer 2

更新

测试完Webpack设置后，我得出结论，package.json中的脚本强制Webpack在开发模式下运行。 CLI参数的优先级高于webpck配置中的mode: production属性。

解决方案是如下调整启动和构建脚本：

"start": "webpack --mode development --watch", "build": "webpack --mode production"

从webpack docs：

摇树是JavaScript上下文中通常用于消除死代码。它依赖于ES2015的静态结构模块语法，即导入和导出。

在您的/src/app/index.js中：

import React from 'react;
import ReactDom from 'react-dom;

class TodoComponent extends React.Component {
  render() {
    return (<h1>hello</h1>);
  }
}

ReactDom.render(<TodoComponent/>, document.querySelector(".todo-wrapper"));

因此，如果您不遵守要求，则摇树将不起作用。

一些不错的线索，它们可以助您一臂之力，您可以找到here和here

值得阅读的外部资源：bundle-size和analyzing-bundle

与NodeJS和Webpack互动-捆绑的js大文件大小

问题：

解决方案：

解决方案：

2 个答案:

更新