1.压缩css
optimaze-css-assets-webpack-plugin
2 压缩js
terser-webpack-plugin
3 对图片进行优化和压缩
image-webpack-loader
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack- plugin');
const TerserPlugin = require('terser-webpack-plugin')
module.export = {
optimazation:{
minimize:true,
minimizer:[
new TerserPlugin()
]
},
module:{
rules:[{
test:/\.(png|jpeg|jpg)/,
use:[
'url-loader',
{
loader:'image-webpack-laoder',
options:{
//具体参数去插件网上找
}
}
]
}]
}
plugins:[
new OptimizeCssAssetsWebpackPlugin()
]
}
4 清除无用的css
const path = require("path"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const PurgecssPlugin = require("purgecss-webpack-plugin"); +const glob = require("glob"); +const PATHS = { + src: path.join(__dirname, "src"), +}; module.exports = { module: { rules: [ {test: /\.css$/, include: path.resolve(__dirname, "src"), exclude: /node_modules/, use: [ { + loader: MiniCssExtractPlugin.loader, },"css-loader", ], } ] },plugins: [ + new MiniCssExtractPlugin({ + filename: "[name].css", + }), + new PurgecssPlugin({ + paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }), + }) ]devServer: {}, };
5 Tree Shaking
//在package.json
{
'sideEffects':false
}