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構建花費太多時間

回答

相關問題