我正在编写一个web应用程序,使用reactwebpack作为我的模块绑定器.

不过,我从webpack创建的bundle.js是2.2MB.在使用-p标志运行优化后,它将Bundle 包减少到700kb,这仍然非常大.

我查看了react.min.js文件,它的大小是130kb.

有没有可能网页会产生这么大的文件,或者我做错了什么?

网页包.配置.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './public/components/main.jsx',
  output: {
    path: __dirname + "/public",
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }, {
      test: /\.css$/,
      loader: "style!css"
    }]
  }
};

EDIT

包裹json:

{
  "name": "XChange",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "main": "./bin/www",
  "devDependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "react-dom": "~0.14.3",
    "react": "~0.14.3",
    "webpack": "~1.12.9",
    "babel-loader": "~6.2.0",
    "babel-core": "~6.2.1",
    "babel-preset-react": "~6.1.18",
    "babel-preset-es2015": "~6.1.18",
    "react-bootstrap": "~0.28.1",
    "material-ui": "~0.14.0-rc1",
    "history": "~1.13.1",
    "react-router": "~1.0.2",
    "style-loader": "~0.13.0",
    "css-loader": "~0.18.0"
  },
  "dependencies": {
    "express-validator": "~2.18.0",
    "mongoose": "~4.2.9",
    "kerberos": "~0.0.17",
    "bcrypt": "~0.8.5"
  }
}

推荐答案

根据你的 comments ,你使用的是material-uireact-bootstrap.这些依赖项通过webpack与reactreact-dom软件包Bundle 在一起.任何时候,当您创建一个包时,它都会作为Bundle 包文件的一部分进行Bundle .

这是我的猜测.您可能正在使用library方式导入react-bootstrapmaterial-ui组件:

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

这很好用,但它不仅Bundle 了ButtonFlatButton(及其依赖项),而且Bundle 了whole个库.

缓解这种情况的一种方法是尽量只减少importrequire件所需的东西,比如说component件.使用相同的示例:

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

这将只Bundle ButtonFlatButton及其各自的依赖项.但不是整个图书馆.所以我会尽量摆脱你所有的library种进口商品,改用component种方式.

如果您没有使用很多组件,那么它应该大大减少Bundle 文件的大小.

作为进一步解释:

当您使用library方式时,您将导入all these react-bootstrapall these material-ui个组件,而不管您实际使用的是哪些组件.

Reactjs相关问答推荐

如何通过TEK查询将对象传递到Express后台

客户端组件中服务器组件的两难境地

如何创建react router v6的自定义子路由?

如何在React中的textarea中显示字符数?

如何用Reaction做交互式的MathML?

如何从Reaction-Arborist树获取排序数据

Reaction-路由-DOM v6与v5

在React中使用映射创建flex组件

在任何渲染之前在ReactJs中获取数据

React useContext 的未定义返回值

运行 npm run build 出现问题

如何防止开发人员使用 ESLint 在 React 项目中使用特定的钩子?

在react 中从外部 api 渲染列表

类型错误:类型typeof import(js-cookie)上不存在属性get

使用 Vite 的 React 中的路由无法正常工作(构建中)

无法在 reactJS 中使用空包装器 <>

单击按钮或文本从一个组件移动到另一个组件

如何定制 React 热 toastr ?

Lodash 在命名导入中导入整个包

将 C# Razor 条件块转换为 React.js 代码