feat(build): optimize output with minification and compression

Switched to 'production' mode in webpack to enable optimizations. Integrated 'css-minimizer-webpack-plugin' and 'terser-webpack-plugin' for CSS and JS minification, respectively. Updated 'mini-css-extract-plugin' and added various dev dependencies to support new build processes. Adjusted output filenames and resolved dependencies to latest versions.

These changes reduce the bundle size and improve load times, enhancing overall performance.
This commit is contained in:
Kumi 2024-09-04 08:07:58 +02:00
parent 035da04bf8
commit 83a23fc66e
No known key found for this signature in database
GPG key ID: ECBCC9082395383F
3 changed files with 1168 additions and 37 deletions

1174
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -4,10 +4,12 @@
},
"devDependencies": {
"css-loader": "^7.1.2",
"css-minimizer-webpack-plugin": "^7.0.0",
"glob-all": "^3.3.1",
"mini-css-extract-plugin": "^2.9.0",
"mini-css-extract-plugin": "^2.9.1",
"purgecss": "^6.0.0",
"purgecss-webpack-plugin": "^6.0.0"
"purgecss-webpack-plugin": "^6.0.0",
"terser-webpack-plugin": "^5.3.10"
},
"dependencies": {
"@popperjs/core": "^2.11.8",

View file

@ -1,15 +1,17 @@
'use strict'
'use strict';
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
const { PurgeCSSPlugin } = require('purgecss-webpack-plugin');
const glob = require('glob-all');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'development',
mode: 'production',
entry: './src/js/main.js',
output: {
filename: 'main.js',
filename: '[name].js',
path: path.resolve(__dirname, 'js'),
},
module: {
@ -35,5 +37,18 @@ module.exports = {
only: ['bootstrap'],
safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow', 'btn-equals', 'btn-arrow', 'alert', 'alert-warning']
})
]
],
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
},
},
}),
new CssMinimizerPlugin(),
],
}
};