I'm setting source-maps to be on production. I'm using TerserWebpackPlugin to minify my js(which appears to be the default one according to the webpack docs). This plugin has a config option for sourceMap, which from the docs it appears you have to enable for best practices(but I'm not 100% sure although it does work without it). The thing is, when it's set to true the option adds an extra 12ish minutes to build time(from around 1:15 mins to 13ish mins). An extra 12 mins of build time being added feels a bit much so I'm guessing when sourceMap: true it parses the source maps however source maps are only downloaded once a user opens their dev tools so I'm wondering if this is even needed.

My question is, is this config required? And if so, is possible to speed up the build process any?

Here's my configs by the way:

webpackmon.js

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const WEBPACK_OUTPUT_PATH = path.resolve(`${__dirname}/webpack_output`);
module.exports = {
  entry: { ... },
  output: {
    path: WEBPACK_OUTPUT_PATH,
    filename: '[name]_bundle.js',
  },
  module: { ... },
  plugins: [
    new CleanWebpackPlugin([WEBPACK_OUTPUT_PATH]),
    new webpack.DefinePlugin({
      'global.BUILD_NUMBER': Date.now(),
    }),
  ],
  resolve: {
    alias: {
      ...
    },
    extensions: ['.js', '.jsx', '.json', '.scss', 'css'],
  },
  watchOptions: {
    poll: true,
    ignored: /node_modules/,
  },
};

webpack.prod.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin');
const mon = require('./webpackmon.js');
module.exports = merge(mon, {
  // NOTE: There are internal webpack plugins that are used when production mode is enabled so they
  // are not defined below. Read more about them here: /
  mode: 'production',
  devtool: 'source-map', 
  performance: {
    hints: 'warning',
  },
  output: {
    pathinfo: false,
  },
  optimization: {
    namedModules: false,
    namedChunks: false,
    nodeEnv: 'production', 
    flagIncludedChunks: true,
    occurrenceOrder: true,
    concatenateModules: true,
    splitChunks: {
      hidePathInfo: true,
      minSize: 30000,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
    },
    noEmitOnErrors: true,
    checkWasmTypes: true,
    minimize: true,
  },
  plugins: [
    new TerserPlugin({
      sourceMap: true,
    }),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
});

I'm setting source-maps to be on production. I'm using TerserWebpackPlugin to minify my js(which appears to be the default one according to the webpack docs). This plugin has a config option for sourceMap, which from the docs it appears you have to enable for best practices(but I'm not 100% sure although it does work without it). The thing is, when it's set to true the option adds an extra 12ish minutes to build time(from around 1:15 mins to 13ish mins). An extra 12 mins of build time being added feels a bit much so I'm guessing when sourceMap: true it parses the source maps however source maps are only downloaded once a user opens their dev tools so I'm wondering if this is even needed.

My question is, is this config required? And if so, is possible to speed up the build process any?

Here's my configs by the way:

webpack.mon.js

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const WEBPACK_OUTPUT_PATH = path.resolve(`${__dirname}/webpack_output`);
module.exports = {
  entry: { ... },
  output: {
    path: WEBPACK_OUTPUT_PATH,
    filename: '[name]_bundle.js',
  },
  module: { ... },
  plugins: [
    new CleanWebpackPlugin([WEBPACK_OUTPUT_PATH]),
    new webpack.DefinePlugin({
      'global.BUILD_NUMBER': Date.now(),
    }),
  ],
  resolve: {
    alias: {
      ...
    },
    extensions: ['.js', '.jsx', '.json', '.scss', 'css'],
  },
  watchOptions: {
    poll: true,
    ignored: /node_modules/,
  },
};

webpack.prod.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin');
const mon = require('./webpack.mon.js');
module.exports = merge(mon, {
  // NOTE: There are internal webpack plugins that are used when production mode is enabled so they
  // are not defined below. Read more about them here: https://webpack.js/plugins/internal-plugins/
  mode: 'production',
  devtool: 'source-map', 
  performance: {
    hints: 'warning',
  },
  output: {
    pathinfo: false,
  },
  optimization: {
    namedModules: false,
    namedChunks: false,
    nodeEnv: 'production', 
    flagIncludedChunks: true,
    occurrenceOrder: true,
    concatenateModules: true,
    splitChunks: {
      hidePathInfo: true,
      minSize: 30000,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
    },
    noEmitOnErrors: true,
    checkWasmTypes: true,
    minimize: true,
  },
  plugins: [
    new TerserPlugin({
      sourceMap: true,
    }),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
});

• javascript
• webpack

Share Improve this question Follow asked Apr 30, 2020 at 17:49 FredmentalFredmental 56522 gold badges88 silver badges1717 bronze badges 1

• Different options of devtool are described in webpack.js/configuration/devtool/#production – Michael Freidgeim Commented Dec 27, 2020 at 4:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You have several options here, depending on what you need. First one, put parallel: true so it's:

new TerserPlugin({
  sourceMap: true,
  parallel: true
})

https://webpack.js/plugins/terser-webpack-plugin/#parallel

Other option is not to provide sourceMap in production mode. You can conditionally set sourceMap: true for more advanced solutions, such as using getIfUtils for webpack config.

so your TerserPlugin config would be:

new TerserPlugin({
  sourceMap: ifProduction(false, true), // if prod, disable it, otherwise enable
  parallel: true
})

But let's get back to question. parallel: true show improve the build for the start and production mode is by default heavier task to perform than 'development` mode build.