Webpack构建花费太多时间

我正在为我的项目使用webpack模块捆绑器。我最近添加了一些第三方库，这会增加构建时间。这由于uglify js插件。在完成运行webpack之前，我的构建陷入了91％的困境。没有这个插件，它花的时间更少。但我必须使用该插件。我试图使用并行uglify js插件。但它似乎没有在我的情况下工作。建议我应该尝试其他方式来缩短构建时间。我已附加webpack文件以供参考。Webpack构建花费太多时间

var webpack = require('webpack'); 
var path = require("path"); 
var glob = require("glob"); 

module.exports = { 
    entry: glob.sync("./app/javascript/views/*.js") 
      .reduce(function(map, path) { 
       map[path.split('/').pop()] = path; 
       return map; 
      }, {}), 
    output: { 
    path: path.resolve(__dirname, 'app/assets/javascripts'), 
    filename: '[name]' 
    }, 

    stats: { 
    colors: true, 
    reasons: false 
    }, 

    resolve: { 
    extensions: ['.js', '.jsx'], 
    alias: { 
     'styles': __dirname + '/app/assets/styles', 
     'js': __dirname + '/app/javascript/', 
     "vendor": __dirname + '/vendor/', 
    } 
    }, 

    module: { 
    rules: [{ 
     test: /\.(js|jsx)$/, 
     exclude: [/node_modules/, /vendor/], 
     enforce: 'pre', 
     use: [{loader: 'eslint-loader'}] 
    },{ 
     test: /\.(js|jsx)$/, 
     exclude: [/node_modules/, /vendor/], 
     use: [{loader: 'babel-loader'}] 
    },{ 
     test: /[\\\/]vendor[\\\/]pages[\\\/]pages-plugins[\\\/]modernizr\.custom\.js$/, 
     loader: "imports-loader?this=>window!exports-loader?window.Modernizr" 
    }] 
    }, 

    externals: { 
    'I18n': 'I18n', 
    'ChargeBee': 'ChargeBee', 
    'TLAssets': 'TLAssets' 
    }, 

    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify('production'), 
     }, 
     __DEBUG__: false 
    }), 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     'window.jQuery': 'jquery', 
     'root.jQuery': 'jquery', 
    }), 
    new webpack.LoaderOptionsPlugin({ 
     minimize: true, 
     options: { 
     debug: false, 
     devtool: false, 
     eslint: { 
      configFile: "./.eslintrc-prod" 
     }, 
     }, 
    }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.AggressiveMergingPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     sourceNap: false, 
     minimize: true, 
     compress: { 
     warnings: false, 
     screw_ie8: true, 
     conditionals: true, 
     unused: true, 
     comparisons: true, 
     sequences: true, 
     dead_code: true, 
     evaluate: true, 
     join_vars: true, 
     if_return: true 
     }, 
     output: { 
     comments: false 
     } 
    }), 
    new webpack.NoEmitOnErrorsPlugin() 
    ] 
};

来源

2017-07-25 Mathew

老问题，但这里有一些事情我是为了使它有条件的 - 有时我想采取生产构建快速旋转。

package.json，注意第二行条目。

"build-production": "NODE_ENV=production webpack --config websec/build/webpack.config.production.js --progress --colors", 
"build-production-nouglify": "NO_UGLIFY=1 NODE_ENV=production webpack --config websec/build/webpack.config.production.js --progress --colors",

webpack.config.production.js：

首先拿起从主机的环境NO_UGLIFY决定。

const do_uglify = process.env.NO_UGLIFY === "1" ? false : true

在它的尾部：

//only do uglify when you want it... 
if (do_uglify){ 

    config.plugins = config.plugins.concat(
    [new UglifyJSPlugin()] 
    ) 
}

在默认情况下，你将有丑化但npm run build-production-nouglify将保留所有的生产流水线，减去最后uglify一步。您也可以使用export NO_UGLIFY=1。

来源

2018-03-02 03:01:41

Webpack构建花费太多时间

回答

相关问题