I've made the decision to enable source maps for production. Utilizing TerserWebpackPlugin for minifying my js files, as suggested by webpack documentation. This plugin includes a config option for sourceMap, which according to the docs, should be enabled for optimal practices (although it seems to work without it). However, setting sourceMap: true adds an additional approximate 12 minutes to the build time (from about 1:15 mins to 13ish mins). Given this significant increase in build time, I am curious if enabling source maps is truly necessary, considering that source maps are only accessed when a user opens their dev tools.
My main question is whether this config is essential and if there are any strategies to improve the speed of the build process.
Below are the configurations I have set up:
webpack.common.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 common = require('./webpack.common.js');
module.exports = merge(common, {
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(),
],
});