ウェブパック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; 

マイ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の2つの別々のconfig（基本設定を使い果たしていることもあります）を作成し、両方で異なるソースマップタイプを使用するだけです。

生産および開発で使用するソースマップタイプについてはhttps://webpack.js.org/configuration/devtool/を参照してください。プロダクションでは、cheap-source-mapのようなものを使うか、ソースマップをまったく使用しないでください。

一般に、ソースマップは、スタンドアロンのバンドル/チャンクとして出力されるか、コードバンドル自体に含まれ、行/列情報からソースマップなしまで、さまざまな詳細レベルを持ちます。これは、プロダクションでどのくらいのデバッグ情報が必要かを判断し、ソースを一般公開することができればあなた次第です。