javascript - 从开发模式到生产模式，第一个有意义的油漆从 300 毫秒上升到 6700 毫秒

Question

我正在编写 PWA 并使用 lighthouse 来审核我的应用程序。有一点我有点卡住了。事情就是这样。当我进行生产构建时（我正在使用我的 3 个 JS 文件（供应商、应用程序和清单），加载时间非常高。

当我在开发模式下为我的 webpack 构建做同样的事情并审核应用程序时，我得到了这个

这似乎非常违反直觉。

PS：我在开发模式下使用webpack 缓存和 UglifyJsPlugin 进行 uglify

这是webpack配置

    var path = require('path');
    var webpack = require('webpack');
    var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ReplaceHashWebpackPlugin = require('replace-hash-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

var DEV = process.env.NODE_ENV !== 'production';
var BUILD_GLOBALS = {
    '__DEV__': DEV,
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
};


module.exports = {
    context: __dirname,
    entry: {
        build: './src/init'
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].js',
        publicPath: '/dist',
        libraryTarget: 'umd'
    },
    resolve: {
        extensions: ['.json', '.webpack.js', '.js', '.jsx']
    },
    module: {
        loaders: [{
                test: /\.jsx?$/,
                exclude: /node_modules/,
                // loaders: DEV ? ['react-hot','babel-loader'] : ['babel-loader']
                loaders: ['babel-loader']
            },
            {
                test: /\.css$/,
                loaders: ['style-loader!css-loader']
            }
        ],
        // preLoaders : [
        //  {
        //      test : /\.jsx?$/,
        //      exclude : /node_modules/,
        //      loaders : ['eslint-loader']
        //  }
        // ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist'], {
            root: process.cwd(),
            verbose: true
        }),
        new(webpack.optimize.OccurenceOrderPlugin || webpack.optimize.OccurrenceOrderPlugin)(),
        new webpack.DefinePlugin(BUILD_GLOBALS),
        new ExtractTextPlugin("default.css"),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor.bundle',
            minChunks: function(module) {
                // this assumes your vendor imports exist in the node_modules directory
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
        })
    ].concat(DEV ? [
        // new webpack.HotModuleReplacementPlugin()
        new BundleAnalyzerPlugin()
    ] : [
        new webpack.optimize.UglifyJsPlugin(),
    ]),
    devtool: DEV ? '#inline-source-map' : false,
    cache: DEV

};