Produktion Webpack erhöht die Größe von bundle.js.map

Question

Ich versuche, eine Produktion Build meines Codes zu erstellen und eine Datei webpack.production.config.js gemacht. Wenn ich 'webpack -p' ausführe, wird meine Datei bundle.js verkleinert, aber die Dateigröße meiner bundle.js.map wird erhöht. Hier ist der Code und die entsprechenden Ausgänge:

webpack.config.js:

const path = require("path"); //eslint-disable-line 
const webpack = require('webpack'); 


module.exports = { 
    context: __dirname, 
    entry: "./frontend/index.jsx", 
    output: { 
    path: path.join(__dirname, 'assets', 'build'), 
    filename: "bundle.js", 
    devtoolModuleFilenameTemplate: '[resourcePath]', 
    devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]' 
    }, 
    externals: { 
    'cheerio': 'window', 
    'react/lib/ExecutionEnvironment': true, 
    'react/lib/ReactContext': true 
    }, 
    module: { 
    loaders: [ 
     { 
     test: [/\.jsx?$/, /\.js?$/], 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'eslint-loader' 
     } 
    ] 
    }, 
    devtool: 'source-map', 
    eslint: { 
    configFile: './.eslintrc' 
    }, 
    resolve: { 
    extensions: ["", ".js", ".jsx" ] 
    }, 
    watchOptions: { 
    aggregateTimeout: 500, 
    poll: 2000, 
    ignored: /node_modules/ 
} 
}; 



11:22 $ webpack 
Hash: 3eaf0c4ed8964deb6866 
Version: webpack 1.13.3 
Time: 5805ms 
     Asset  Size Chunks    Chunk Names 
    bundle.js 2.16 MB  0 [emitted] main 
bundle.js.map 2.53 MB  0 [emitted] main 
    + 484 hidden modules 

webpack.production.config.js:

const path = require("path"); //eslint-disable-line 
const webpack = require('webpack'); 


module.exports = { 
    context: __dirname, 
    entry: "./frontend/index.jsx", 
    output: { 
    path: path.join(__dirname, 'assets', 'build'), 
    filename: "bundle.js", 
    devtoolModuleFilenameTemplate: '[resourcePath]', 
    devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]' 
    }, 
    externals: { 
    'cheerio': 'window', 
    'react/lib/ExecutionEnvironment': true, 
    'react/lib/ReactContext': true 
    }, 
    module: { 
    loaders: [ 
     { 
     test: [/\.jsx?$/, /\.js?$/], 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'eslint-loader' 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify('production') 
     } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: true 
     } 
    }) 
    ], 
    devtool: 'cheap-module-source-map', 
    resolve: { 
    extensions: ["", ".js", ".jsx" ] 
    } 
}; 


11:19 $ webpack -p 
Hash: c40d4a49c049e8b5a525 
Version: webpack 1.13.3 
Time: 20990ms 
     Asset  Size Chunks    Chunk Names 
    bundle.js 805 kB  0 [emitted] main 
bundle.js.map 5.55 MB  0 [emitted] main 
    + 484 hidden modules 

Jede Idee, warum bundle.js.map erhöht sich so deutlich und wenn das ein Problem ist? Ich bekomme auch eine Reihe von Warnungen von Uglify.js, die ich ignoriert habe.

Danke.

Answer 1

Ich glaube nicht, dass dies ein Problem ist, da Source-Maps nur zum Debuggen verwendet werden. Sie werden auch nur geladen, wenn Devtools geöffnet sind. Performance impact of using css/javascript source-maps in production