CSS- en JavaScript-bestanden verkleinen, een proces dat vaak “minification” wordt genoemd, verwijst naar het verwijderen van alle onnodige tekens uit de broncode zonder de functionaliteit ervan te veranderen. Dit omvat het verwijderen van spaties, nieuwe regels, opmerkingen en soms het verkorten van variabele namen. Dit proces kan aanzienlijk bijdragen aan het verbeteren van de laadsnelheid van webpagina’s, wat de gebruikerservaring verbetert en de prestaties van de website verhoogt.
Hier zijn enkele methoden en tools om CSS- en JavaScript-bestanden automatisch te verkleinen:
```
const TerserPlugin = require(‘terser-webpack-plugin’);
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
const CssMinimizerPlugin = require(‘css-minimizer-webpack-plugin’);
module.exports = {
mode: ‘production’,
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, ‘css-loader’],
},
],
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin(),
new CssMinimizerPlugin(),
],
},
plugins: [new MiniCssExtractPlugin()],
};
```
In dit voorbeeld gebruiken we de `TerserPlugin` om JavaScript-bestanden te verkleinen en de `CssMinimizerPlugin` om CSS-bestanden te verkleinen. De `MiniCssExtractPlugin` zorgt ervoor dat de CSS-bestanden worden geëxtraheerd naar aparte bestanden.
```
const gulp = require(‘gulp’);
const cleanCSS = require(‘gulp-clean-css’);
const uglify = require(‘gulp-uglify’);
gulp.task(‘minify-css’, () => {
return gulp.src(‘src/css/*.css’)
.pipe(cleanCSS({ compatibility: ‘ie8’ }))
.pipe(gulp.dest(‘dist/css’));
});
gulp.task(‘minify-js’, () => {
return gulp.src(‘src/js/*.js’)
.pipe(uglify())
.pipe(gulp.dest(‘dist/js’));
});
gulp.task(‘default’, gulp.parallel(‘minify-css’, ‘minify-js’));
```
In dit voorbeeld verkleinen we CSS-bestanden met behulp van `gulp-clean-css` en JavaScript-bestanden met behulp van `gulp-uglify`.
```
{
“scripts”: {
“minify-js”: “terser src/js/app.js -o dist/js/app.min.js”,
“minify-css”: “cleancss -o dist/css/app.min.css src/css/app.css“
}
}
```
In dit voorbeeld gebruiken we `terser` om JavaScript te verkleinen en `clean-css-cli` voor CSS.
Het verkleinen van CSS- en JavaScript-bestanden is een effectieve manier om de prestaties van je website te verbeteren. Door gebruik te maken van tools zoals Webpack en Gulp, of door online diensten en CDN’s te benutten, kun je dit proces snel en efficiënt automatiseren.
