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;

我的package.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'

此类源代码映射仅适用于developmnent，因此如果捆绑包大小很大，则不是问题。因此配置文件本身没有任何问题，你只需要为development and production制作两个单独的配置（可能都是一个基本配置），并在两者中使用不同的源地图类型。

有关应在生产和开发中使用的源地图类型，请参阅https://webpack.js.org/configuration/devtool/。对于生产，您可以使用类似cheap-source-map的内容，或者根本不使用源地图。

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

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

1 个答案: