webpack(三)之体积优化

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
}