reactjs - 为什么我的 webpack bundle.js 大于 7.58MB

Question

为什么我的 bundle.js 这么大？

我的配置文件有什么问题？

我所有的 React 项目的文件大小都非常大(bundle.js 是 7.58 mb)。我不知道为什么这么大。我已经启用了 uglifyJS，但这似乎帮助不大。

详情如下:

bundle.js    7.58 MB       0  [emitted]  main

index.html  942 bytes          [emitted] 

我的 webpack.config.js

const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

const BUILD_DIR = path.resolve(__dirname, 'dist');
const APP_DIR = path.resolve(__dirname, 'src/components');
const DATA_DIR = path.resolve(__dirname, 'data');


const config = {
    entry: APP_DIR + '/App.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: [
                    'babel'
                ],
                query: {
                    presets: ["es2015", "react"]
                }
            },
            {
                test: /\.css$/,
                loader:'style-loader!css-loader?importLoaders=1!postcss-loader'
            },
            {
                test:/\.scss$/,
                loader:'style-loader!css-loader?importLoaders=1!postcss-loader!sass-loader'
            },
            {
                test: /\.html/,
                loader:'html-loader'
            },
            {
                test: /\.(json)([\?]?.*)$/,
                include: DATA_DIR,
                loader: "file-loader",
                query:{
                    name:"data/[name].[ext]"
                }
            },
            {
                test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
                loader: "file-loader",
                query:{
                    name:"asserts/fonts/[name].[ext]"
                }
            },
            {
                test: /\.(gif|png|jpe?g)$/i,
                include: DATA_DIR,
                loader: "file-loader",
                query:{
                    name:"data/images/[name]-[hash:5].[ext]"
                }
            }
        ]
    },
    postcss:[
        require('autoprefixer')({
            broswers:['last 5 versions']
        })
    ],
    devtool:'eval-source-map',
    devServer:{
        historyApiFallback:true,
        hot:true,
        inline:true,
        proxy:{
            '/api/*':{
                target:'http://localhost:8081',
                secure:false
            }
        }
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false
            }
        }),
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            title:'this is a title',    //一个title 属性
            inject:'body'
        })
    ]
};

module.exports = config;

我的包.json

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --progress --profile --colors --hot --inline --port 3000 --host 0.0.0.0",
    "dev": "webpack -d --watch",
    "webpack": "webpack -p --config webpack.config.js --colors --display-reasons --display-error-details --display-modules --sort-modules-by size"
  },
  "author": "Sharp",
  "license": "MIT",
  "dependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "webpack": "^1.12.8"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "axios": "^0.15.3",
    "babel-plugin-import": "^1.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "css-loader": "^0.27.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "history": "^4.6.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "lodash": "^4.17.4",
    "node-sass": "^4.5.0",
    "postcss-loader": "^1.3.3",
    "react-addons-update": "^15.4.2",
    "react-bootstrap": "^0.30.8",
    "react-bootstrap-datetimepicker": "0.0.22",
    "react-redux": "^5.0.3",
    "react-router": "^3.0.2",
    "redux": "^3.6.0",
    "redux-logger": "^2.8.2",
    "redux-thunk": "^2.2.0",
    "remove": "^0.1.5",
    "sass-loader": "^6.0.3",
    "scss-loader": "0.0.1",
    "style-loader": "^0.14.1",
    "webpack-dev-server": "^1.16.3"
  }
}

有人知道如何解决这个问题吗？

Answer 1

警告:OP 的配置是 webpack v1 配置，而我的回答是 v2。

您正在使用包含在包本身中的源映射类型:

devtool:'eval-source-map'

这种类型的源映射仅用于开发，因此如果包大小很大，这不是问题。所以你的配置文件本身没有问题，你只需要为 development and production 做两个单独的配置(可能都扩展一个基本配置)。 ，并在两者中使用不同的源映射类型。

参见 https://webpack.js.org/configuration/devtool/对于应该在生产和开发中使用的源映射类型。对于生产，您可以使用 cheap-source-map 之类的东西，或者根本不使用源映射。

通常源映射可以作为独立的包/ block 输出或包含在代码包本身中，并且具有不同级别的详细信息，从行/列信息到根本没有源映射。这由您决定在生产中需要多少调试信息，以及您是否愿意公开您的源代码。