Chapter 9: Asset Optimization
Chapter 9 of 12
Chapter 9: Asset Optimization
9.1 Minification and Compression
Asset optimization reduces file sizes and improves load times.
// Minification
// Before
function calculateTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
return total;
}
// After minification
function calculateTotal(a){let b=0;for(let c=0;c9.2 Image Optimization
// Webpack image optimization
{
test: /.(png|jpg|jpeg)$/,
use: [
{
loader: 'image-webpack-loader',
options: {
mozjpeg: { quality: 80 },
optipng: { optimizationLevel: 7 }
}
}
]
}9.3 Compression
// Gzip compression
const CompressionPlugin = require('compression-webpack-plugin');
plugins: [
new CompressionPlugin({
algorithm: 'gzip',
test: /.(js|css|html|svg)$/,
threshold: 8192
})
]