与Webpack巨大的捆绑包大小做出反应

Question

我有一个非常基本的应用程序，但是开发包大小为6.7MB，生产时为1.8MB。狮子的份额（94％）是节点模块。有没有直接的方法来捆绑那些所需的模块？我试过Webpack Node Externals，但这打破了一切 - 例如，应用程序不知道'需要'意味着什么。我正在使用Webpack 3.8。这是我的配置文件：

webpack.config：

const loaders = require('loaders');
const CompressionPlugin = require('compression-webpack-plugin');
var Visualizer = require('webpack-visualizer-plugin');
var nodeExternals = require('webpack-node-externals');

module.exports = {
    entry: ['./src/index.js'],
    output: {
        path: __dirname,
        publicPath: '/',
        filename: 'bundle.js',
        sourceMapFilename: 'bundle.js.map'
    },
    module: {
        loaders: [
            loaders.css,
            loaders.url,
            {
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-1']
                }
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    plugins: [
        new CompressionPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
            threshold: 10240,
            minRatio: 0.8
        }),
        new Visualizer()
    ],
    devServer: {
        historyApiFallback: true,
        contentBase: './'
    }
};

webpack.production.config：

// Webpack config for creating the production bundle.

var path = require('path');
var webpack = require('webpack');
var writeStats = require('./util/writeStats');
var strip = require('strip-loader');
const CompressionPlugin = require('compression-webpack-plugin');
var nodeExternals = require('webpack-node-externals');

var assetsPath = path.join(__dirname, '../static/dist');

module.exports = {
    context: path.resolve(__dirname, '..'),
    entry: {
        main: './src/client.js'
    },
    output: {
        path: assetsPath,
        filename: '[name]-[chunkhash].js',
        chunkFilename: '[name]-[chunkhash].js',
        publicPath: '/dist/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loaders: [strip.loader('debug'), 'babel?stage=0&optional=runtime']
            }
        ]
    },
    progress: true,
    resolve: {
        modulesDirectories: ['src', 'node_modules'],
        extensions: ['*', '.json', '.js']
    },
    plugins: [
        // new webpack.DefinePlugin({__CLIENT__: true, __SERVER__: false}),

        // ignore dev config
        new webpack.IgnorePlugin(/\.\/dev/, /\/config$/),

        // set global vars
        new webpack.DefinePlugin({
            'process.env': {
                // Mainly used to require CSS files with webpack, which can happen only on browser
                // Used as `if (process.env.BROWSER)...`
                BROWSER: JSON.stringify(true),

                // Useful to reduce the size of client-side libraries, e.g. react
                NODE_ENV: JSON.stringify('production')
            }
        }),

        // optimizations
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new CompressionPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
            threshold: 10240,
            minRatio: 0.8
        }),

        // stats
        function() {
            this.plugin('done', writeStats);
        }
    ]
};