【新手】用webpack搭建react应用环境，就写了几行代码，为什么生成出来的js文件大小为1.3M?

Question

用webpack搭建react应用环境，就写了几行代码，为什么生成出来的js文件大小为1.3M？是我的配置有问题吗
下面是我的配置

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var node_modules_dir = path.join(__dirname, 'node_modules');

module.exports = {
    //页面入口文件配置
    entry: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:3000',
        path.resolve(__dirname, 'src/app.jsx')
    ],
    //入口文件输出配置
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
    },
    module: {
        //加载器配置
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: [node_modules_dir],
                loader: 'babel', // 'babel-loader' is also a legal name to reference
                query: {
                    presets: ['es2015','react']
                }
            },
            {
                test: /\.css/,
                loader: 'style!css'
            }
        ],
        
    },
    //其它解决方案配置
    resolve: {
        extensions: ['', '.js', '.jsx', '.json']
        
    },
    plugins: [new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: true
    })]
};

下面是我的app.jsx文件代码

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

import 'antd/lib/index.css'; 

import { Row, Col } from 'antd';

ReactDOM.render(
  <div>
    <Row>
      <Col span="12">.col-12</Col>
      <Col span="12">.col-12</Col>
    </Row>
    <Row className="testRowClassName">
      <Col span="8">.col-8</Col>
      <Col span="8">.col-8</Col>
      <Col span="8" className="testColClassName">.col-8</Col>
    </Row>
    <Row>
      <Col span="6">.col-6</Col>
      <Col span="6">.col-6</Col>
      <Col span="6">.col-6</Col>
      <Col span="6">.col-6</Col>
    </Row>
  </div>,
  document.getElementById('app')
);

个人感觉react加载了两遍，因为antd这个UI库也要加载react。请问大神们是这有原因吗？

Answer 1

非两遍，react本身就很大。压缩一下就小很多了。

Answer 2

exclude: [node_modules_dir]这个文件夹写的对么？node组件文件夹貌似没有dir呀

Answer 3

确实有可能 React 加载了两遍，一些基本的框架库，会被多次引用到的，需要使用 CommonsChunkPlugin 进行代码优化，否则的话就会造成多次加载，webpack 的官方实例是这样的：

var webpack = require("webpack");

module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["jquery", "underscore", ...],
  },
  output: {
    filename: "bundle.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
  ]
};

更具体的可以参见 https://webpack.github.io/docs/code-spli...

Answer 4

推荐看看这个，很不错

http://fakefish.github.io/react-webpack-...

Answer 5

官方的优化API文件里几乎没有，建议去看文档