1.压缩css
    optimaze-css-assets-webpack-plugin
    2 压缩js
    terser-webpack-plugin
    3 对图片进行优化和压缩
    image-webpack-loader

    1. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack- plugin');
    2. const TerserPlugin = require('terser-webpack-plugin')
    3. module.export = {
    4. optimazation:{
    5. minimize:true,
    6. minimizer:[
    7. new TerserPlugin()
    8. ]
    9. },
    10. module:{
    11. rules:[{
    12. test:/\.(png|jpeg|jpg)/,
    13. use:[
    14. 'url-loader',
    15. {
    16. loader:'image-webpack-laoder',
    17. options:{
    18. //具体参数去插件网上找
    19. }
    20. }
    21. ]
    22. }]
    23. }
    24. plugins:[
    25. new OptimizeCssAssetsWebpackPlugin()
    26. ]
    27. }

    4 清除无用的css

    1. 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

    1. //在package.json
    2. {
    3. 'sideEffects':false
    4. }