如何通过webpack进行css、js代码压缩

前端优化是每个前端工程师必须处理的事情，优化的目的在于让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源。

前端里面包含的内容是丰富的，包括HTML，CSS以及JS和图片等各种各样的资源。因此前端优化是复杂的和必要的，下面总结一些优化的方法，可能不太全面，欢迎指正。

CSS压缩

关于css压缩是通过Webpack使用插件：optimize-css-assets-webpack-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const optimizeCss = require("optimize-css-assets-webpack-plugin");

plugins: [
    // 给文件头部添加本次打包信息
    new webpack.BannerPlugin({
      banner:
        "@buildTime: " +
        release.buildTime +
        "\n" +
        "@branch: " +
        release.branch +
        "\n" +
        "@commitId: " +
        release.commitId,
    }),
    new MiniCssExtractPlugin({
      filename: "static/css/common.css",
    }),
    new optimizeCss(),
  ],

JS压缩

对js代码压缩采用的插件是：terser-webpack-plugin，在此之前，最受欢迎的js压缩插件是：uglifyjs-webpack-plugin，但是UglifyJs的弊端在于不能识别 const语法、不支持ES6的语法，发现uglifyjs-webpack-plugin 2.0版本的Release日志中，明确提示重新切换回到uglify-js，因为uglify-es被废弃了，所以如果需要ES6代码压缩，可以直接使用terser-webpack-plugin

const TerserPlugin = require('terser-webpack-plugin');

  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  devtool: ""