【前端知识之webpack】webpack如何优化前端性能

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍webpack如何优化前端性能。

---

一、webpack的使用背景

• 随着前端的项目逐渐扩大，必然会导致性能问题。尤其大大型复杂的项目中，前端业务可能因为一个小小的数据依赖，导致整个页面的卡顿甚至崩溃。
• 一般项目在完成后，会通过webpack进行打包，利用webpack对前端项目性能优化是一个十分重要的环节。

二、webpack如何优化

通过webpack优化前端的手段有：JS代码压缩、CSS代码压缩、Html文件代码压缩、文件大小压缩、图片压缩、Tree Shaking、代码分离、内联chunk。

1. JS代码压缩

terser是一个JavaScript的解释、绞肉机、压缩机的工具集，可以帮助我们压缩、丑化我们的代码，让bundle更小。在production模式下，webpack 默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自定义配置它，配置方法如下：

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
   
    ...
    optimization: {
   
        minimize: true,
        minimizer: [
            new TerserPlugin({
   
                parallel: true // 电脑cpu核数-1
            })
        ]
    }
}

2.CSS代码压缩

CSS压缩通常是去除无用的空格等，因为很难去修改选择器、属性的名称、值等。CSS的压缩我们可以使用另外一个插件：css-minimizer-webpack-plugin。

// npm install css-minimizer-webpack-plugin -D
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
   
    // ...
    optimization: {
   
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin(