如何通过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: ""