Webpack是一個廣泛使用的模塊打包工具,它提供了多種資源壓縮相關的功能和插件。下面是一些Webpack常用的資源壓縮技術和插件:
1. 壓縮 JavaScript:可以使用UglifyJS插件來壓縮JavaScript代碼。在Webpack配置文件中,通過在`optimization`選項中配置`minimizer`屬性來啟用UglifyJS插件,例如:
```javascript
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ...
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
```
2. 壓縮 CSS:使用css-loader和mini-css-extract-plugin插件可以將CSS文件進行壓縮。在Webpack配置文件中,通過添加壓縮CSS的loader和插件,例如:
```javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
],
// ...
};
```
3. 壓縮圖片:使用image-webpack-loader插件結合file-loader或url-loader可以對圖片進行壓縮。在Webpack配置文件中,添加對圖片的loader和插件配置,例如:
```javascript
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'images',
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 80,
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.9],
speed: 4,
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75,
},
},
},
],
},
],
},
// ...
};
```
按實際情況選擇適合的插件和配置來實現資源壓縮,從而減小文件大小,提高頁面加載速度。