1. A concise explanation of the problem you’re experiencing.
Our site did not pass the test for page speed insights, and I would like to know if it is possible to combine all the modules into one file, avoiding requests. https://www.screencast.com/t/6qxxuSJgp1
Can you help me, what is best way to do this with webpack ?
2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.
My webpack configuration
const webpack = require(‘webpack’);
const path = require(‘path’);
const os = require(‘os’);
const cores = os.cpus().length;
const TerserJsPlugin = require(‘terser-webpack-plugin’);
const CopyWebpackPlugin = require(‘copy-webpack-plugin’);
const LodashModuleReplacementPlugin = require(‘lodash-webpack-plugin’);
const isDev = process.env.NODE_ENV === ‘development’;
const srcPath = ‘./app/scripts/pages/’;
const cesiumSource = ‘node_modules/cesium/Source’;
const cesiumWorkers = ‘…/Build/Cesium/Workers’;
module.exports = (watch = false) => ({
mode: isDev ? ‘development’ : ‘production’,
entry: {
home: ${srcPath}home.js,
calculator: ${srcPath}calculator.js,
},
output: {
path: path.join(__dirname, ‘./dist/assets/scripts/’),
filename: ‘[name].min.js’,
sourcePrefix: ‘’
},
amd: {
toUrlUndefined: true
},
node: {
fs: ‘empty’
},
resolve: {
alias: {
cesium: path.resolve(__dirname, cesiumSource)
}
},
watch,
devtool: ‘’,
module: {
unknownContextCritical: false,
rules: [{
test: /.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: [‘url-loader’]
},{
test: /.js$/,
enforce: ‘pre’,
include: path.resolve(__dirname, cesiumSource),
use: [{
loader: ‘strip-pragma-loader’,
options: {
pragmas: {
debug: false
}
}
}]
}, {
test: /.js$/,
exclude: /node_modules/,
use: [
{
loader: ‘cache-loader’,
options: {
cacheDirectory: path.resolve(
__dirname,
‘node_modules/.cache/cache-loader’
),
},
},
{
loader: ‘thread-loader’,
options: {
poolTimeout: Infinity
}
},
‘babel-loader’
]
},
],
},
optimization: {
noEmitOnErrors: false,
minimizer: [
new TerserJsPlugin({
cache: true,
parallel: true,
terserOptions: {
compress: isDev ? false : true,
ecma: 6,
mangle: true
},
extractComments: false,
sourceMap: false
})
],
splitChunks: {
cacheGroups: {
commons: {
test: /[\/]node_modules[\/]cesium/,
name: ‘Cesium’,
chunks: ‘all’,
}
},
filename: ‘cesium.bundle.js’
}
},
plugins: [
new CopyWebpackPlugin([{from: path.join(cesiumSource, cesiumWorkers), to: ‘Workers’}]),
new CopyWebpackPlugin([{from: path.join(cesiumSource, ‘Assets’), to: ‘Assets’}]),
new CopyWebpackPlugin([{from: path.join(cesiumSource, ‘Widgets’), to: ‘Widgets’}]),
new webpack.DefinePlugin({
‘process.env’: {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || ‘development’),
},
CESIUM_BASE_URL: JSON.stringify(’./assets/scripts/’)
}),
new LodashModuleReplacementPlugin,
new webpack.optimize.ModuleConcatenationPlugin(),
],
});
Sorry for bad English