如何用 webpack 来优化前端性能？主要从构建时间优化和构建体积两方面来进行优化性能。多做一点，提升用户体

一. 构建时间优化

thred-loader 多进程打包

npm i thread-loader -D

// webpack.base.js  
{  
    test: /\.js$/,  
    use: [  
      {  
        loader: 'thread-loader',    
        options: {  
          workers: 3 // 开启 3个 进程  
        }  
      },  
      loader: 'babel-loader',  
    ],  
}

放在比较费时间的 loader 之前，如 babel-loader。

放置在这个 thread-loader 之后的 loader 就会在一个单独的 worker 池 (worker pool) 中运行。

每个 worker 都是一个单独的有 600ms 限制的 node.js 进程。同时跨进程的数据交换也会被限制。所以建议仅在耗时的 loader 上使用。若项目文件不算多就不要使用，毕竟开启多个线程也会存在性能开销。

cache-loader 缓存资源

// webpack.base.js  
  
{  
    test: /\.js$/,  
    use: [  
      'cache-loader',  
      'thread-loader',  
      'babel-loader'  
    ],  
},

放在比较费时间的 loader 之前，如 babel-loader。

或者使用 webpack5 提供的 cache 配置项，开启后即可缓存。

module.exports = {  
  cache: {  
    type: 'filesystem'  
  }  
}

编译后会多出 /node_modules/.cache/webpack 缓存目录

合理设置 exclude & include
- exclude: 不需要处理的文件
- include: 需要处理的文件

// webpack.base.js  
  
{  
    test: /\.js$/,  
    //使用exclude排除指定文件夹  
    exclude: /node_modules/,  
    //使用include来指定编译文件夹  
    include: path.resolve(__dirname, '../src'),  
    use: [  
      'babel-loader'  
    ]  
},

开启热更新

只更新修改的模块，只用于开发阶段，配置在 webpack.dev.js 中。

// webpack.dev.js  
  
//1.引入 webpack  
const webpack = require('webpack');  
  //2.使用 webpack 提供的热更新插件  
  plugins: [  
    new webpack.HotModuleReplacementPlugin()  
  ],  
  //3.最后在 devserver 中配置  
  devServer: {  
    hot: true  
  },

配置 resolve.modules 指定 webpack 查找第三方模块范围

module.export = {  
  resolve: {  
    modules: [path.resolve(__dirname, 'node_modules')]  
  }  
}

构建区分环境

区分环境去构建是非常重要的，我们要明确知道，开发环境时我们需要哪些配置，不需要哪些配置；而最终打包生产环境时又需要哪些配置，不需要哪些配置：

开发环境：去除代码压缩、gzip、体积分析等优化的配置，大大提高构建速度
生产环境：需要代码压缩、gzip、体积分析等优化的配置，大大降低最终项目打包体积
使用 webpack 新版本

二. 构建体积优化

压缩 CSS 代码

1.第一种方式：

CSS代码压缩使用css-minimizer-webpack-plugin，效果包括压缩、去重。

代码的压缩比较耗时间，所以只用在打包项目时，所以只需要在webpack.prod.js中配置。

npm i css-minimizer-webpack-plugin -D

// webpack.prod.js  
  
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')  
  
optimization: {  
minimizer: [  
  new CssMinimizerPlugin(), // 去重压缩css  
],  
}

2.第二种方式压缩 css 我们使用 css-minimizer-webpack-plugin

同时，应该把 CSS 提取成单独的文件，使用 mini-css-extract-plugin。

// css-minimizer-webpack-plugin.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");  
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");  
  
module.exports = {  
  module: {  
    rules: [  
      {  
        test: /.css$/,  
        use: [  
           // 提取成单独的文件  
           MiniCssExtractPlugin.loader,  
           "css-loader"  
        ],  
        exclude: /node_modules/,   
      },  
    ]  
  },  
  plugins: [  
    new MiniCssExtractPlugin({  
      // 定义输出文件名和目录  
      filename: "asset/css/main.css",  
    })  
  ],  
  optimization: {  
    minimize: true,  
    minimizer: [  
      // 压缩 css  
      new CssMinimizerPlugin({}),  
    ],  
  },  
}

压缩 JS 代码

JS代码压缩使用terser-webpack-plugin，实现打包后JS代码的压缩

代码的压缩比较耗时间，所以只用在打包项目时，所以只需要在 webpack.prod.js 中配置

npm i terser-webpack-plugin -D

// webpack.prod.js  
  
const TerserPlugin = require('terser-webpack-plugin')  
  
optimization: {  
    minimizer: [  
      new CssMinimizerPlugin(), // 去重压缩css  
      new TerserPlugin({ // 压缩JS代码  
        terserOptions: {  
          compress: {  
            drop_console: true, // 去除console  
          },  
        },  
      }), // 压缩JavaScript  
    ],  
}

压缩 HTML 代码

压缩 HTML 使用的是 html-webpack-plugin 插件。该插件支持配置一个 minify 对象，用来配置压缩 HTML。

// html-webpack-plugin.js

module.export = {  
  plugins: [  
    new HtmlWebpackPlugin({  
      // 动态生成 html 文件  
      template: "./index.html",  
      minify: {  
        // 压缩HTML  
        removeComments: true, // 移除HTML中的注释  
        collapseWhitespace: true, // 删除空⽩符与换⾏符  
        minifyCSS: true // 压缩内联css  
      },  
    })  
  ]  
}

压缩图片

// image-webpack-loader.js

module.exports = {  
  module: {  
    rules: [  
      {  
        test: /.(png|jpg|gif|jpeg|webp|svg)$/,  
        use: [  
          "file-loader",  
          {  
            loader: "image-webpack-loader",  
            options: {  
              mozjpeg: {  
                progressive: true,  
              },  
              optipng: {  
                enabled: false,  
              },  
              pngquant: {  
                quality: [0.65, 0.9],  
                speed: 4,  
              },  
              gifsicle: {  
                interlaced: false,  
              },  
            },  
          },  
        ],  
        exclude: /node_modules/, //排除 node_modules 目录  
      },  
    ]  
  },  
}

按需加载

很多时候我们不需要一次性加载所有的JS文件，而应该在不同阶段去加载所需要的代码。

将路由页面/触发性功能单独打包为一个文件，使用时才加载，好处是减轻首屏渲染的负担。因为项目功能越多其打包体积越大，导致首屏渲染速度越慢。

实际项目中大部分是对懒加载路由，而懒加载路由可以打包到一个 chunk 里面。比如某个列表页和编辑页它们之间存在相互跳转，如果对它们拆分成两个 import() js 资源加载模块，在跳转过程中视图会出现白屏切换过程。

因为在跳转期间，浏览器会动态创建 script 标签来加载这个 chunk 文件，在这期间，页面是没有任何内容的。

所以一般会把路由懒加载打包到一个 chunk 里面

const List = lazyComponent('list', () => import(/* webpackChunkName: "list" */ '@/pages/list'));  
const Edit = lazyComponent('edit', () => import(/* webpackChunkName: "list" */ '@/pages/edit'));

但需要注意一点：动态导入 import() 一个模块，这个模块就不能再出现被其他模块使用 同步 import 方式导入。

比如，一个路由模块在注册 <Route /> 时采用动态 import() 导入，但在这个模块对外暴露了一些变量方法供其他子模块使用，在这些子模块中使用了同步 ESModule import 方式引入，这就造成了 动态 import() 的失效。

tree shaking

查看 tree shaking 原理

tree shaking 在生产模式下已经默认开启了

module.exports = {  
  mode: 'production'  
}

只是需要注意下面几点：

只对ESM生效。
只能是静态声明和引用的 ES6 模块，不能是动态引入和声明的。
只能处理模块级别，不能处理函数级别的冗余。
只能处理 JS 相关冗余代码，不能处理 CSS 冗余代码。

样式文件代码可以通过 purgecss-webpack-plugin 插件来对 css 进行 tree shaking。

const path = require("path");  
const PurgecssPlugin = require("purgecss-webpack-plugin");  
const glob = require("glob"); // 文件匹配模式  
  
module.exports = {  
  //...  
  plugins: [  
    ...  
    new PurgeCSSPlugin({  
      paths: glob.sync(`${PATH.src}/**/*`, { nodir: true }),  
    })  
  
    // Add your plugins here  
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/  
  ],  
};

作用域提升

module.exports = {  
  //方式1  
  mode: 'production',  
  
  //方式2  
  plugins: [  
    // 开启 Scope Hoisting 功能  
    new webpack.optimize.ModuleConcatenationPlugin()  
  ]  
}

代码分割

一般是把不变的第三方库、一些公共模块（比如 util.js）这些单独拆成一个 chunk，在访问页面的时候，就可以一直使用浏览器缓存中的资源。

webpack 里面通过 splitChunks 来分割代码

module.exports = {  
  //... 代码省略 
  optimization: {  
    splitChunks: {  
      chunks: 'async', // 值有 `all`，`async` 和 `initial`  
      minSize: 20000, // 生成 chunk 的最小体积（以 bytes 为单位）。  
      minRemainingSize: 0,  
      minChunks: 1, // 拆分前必须共享模块的最小 chunks 数。  
      maxAsyncRequests: 30, // 按需加载时的最大并行请求数。  
      maxInitialRequests: 30, // 入口点的最大并行请求数。  
      enforceSizeThreshold: 50000,  
      cacheGroups: {  
        defaultVendors: {  
          test: /[/]node_modules[/]/,  //第三方模块拆出来  
          priority: -10,  
          reuseExistingChunk: true,  
        },  
        util.vendors: {  
          test: /[/]utils[/]/, //公共模块拆出来  
          minChunks: 2,  
          priority: -20,  
          reuseExistingChunk: true,  
        },  
      },  
    },  
  },  
};

Proload & Prefetch

对于某些较大的模块，如果点击时再加载，那可能响应的时间反而延长。我们可以使用 Preload、Prefetch 去加载这些模块

Preload：当前核心代码加载期间可能需要模块资源（当前页面需要的但暂时还没使用到的），其是和核心代码文件一起去加载的。

Prefetch：将来可能需要一些模块资源（一般是其他页面的代码），在核心代码加载完成之后带宽空闲的时候再去加载需要用到的模块代码。

document.getElementById('btn1').onclick = function() {  
  import(  
  /* webpackChunkName: "btnChunk" */  
  /* webpackPrefetch: true*/  
  './module1.js'  
  ).then(fn => fn.default());  
}

这行代码表示在浏览器空闲时加载 module1.js 模块，并且单独拆一个 chunk，叫做 btnChunk。

可以看到，在head里面，我们的懒加载模块被直接引入了，并且加上了rel='prefetch'。

这样，页面首次加载的时候，浏览器空闲的时会提前加载 module1.js 。当我们点击按钮的时候，会直接从缓存中读取该文件，因此速度非常快。

source-map类型

source-map的作用是：方便你报错的时候能定位到错误代码的位置。它的体积不容小觑，所以对于不同环境设置不同的类型是很有必要的。

开发环境

开发环境的时候我们需要能精准定位错误代码的位置。

// webpack.dev.js  
  
module.exports = {  
  mode: 'development',  
  devtool: 'eval-cheap-module-source-map'  
}

生产环境

我们想开启 source-map ，但是又不想体积太大，那么可以换一种类型

// webpack.prod.js  
  
module.exports = {  
  mode: 'production',  
  devtool: 'nosources-source-map'  
}

三. 用户体验优化

模块懒加载

如果不进行模块懒加载的话，最后整个项目代码都会被打包到一个js文件里，单个js文件体积非常大，那么当用户网页请求的时候，首屏加载时间会比较长，使用模块懒加载之后，大js文件会分成多个小js文件，网页加载时会按需加载，大大提升首屏加载速度。

// src/router/index.js  
  
const routes = [  
  {  
    path: '/login',  
    name: 'login',  
    component: login  
  },  
  {  
    path: '/home',  
    name: 'home',  
    // 懒加载  
    component: () => import('../views/home/home.vue'),  
  },  
]

Gzip

前端除了在打包的时候将无用的代码或者 console、注释剔除之外。我们还可以使用 Gzip 对资源进行进一步压缩。那么浏览器和服务端是如何通信来支持 Gzip 呢？

当用户访问 web 站点的时候，会在 request header 中设置 accept-encoding:gzip，表明浏览器是否支持 Gzip。
服务器在收到请求后，判断如果需要返回 Gzip 压缩后的文件那么服务器就会先将我们的 JS\CSS 等其他资源文件进行 Gzip 压缩后再传输到客户端，同时将 response headers 设置 content-encoding:gzip。反之，则返回源文件。
浏览器在接收到服务器返回的文件后，判断服务端返回的内容是否为压缩过的内容，是的话则进行解压操作。

一般情况下我们并不会让服务器实时 Gzip 压缩，而是利用 webpack 提前将静态资源进行 Gzip 压缩，然后将 Gzip 资源放到服务器，当请求需要的时候直接将 Gzip 资源发送给客户端。

只需要安装 compression-webpack-plugin 并在 plugins 配置就可以了。

// webpack.prod.js

const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 需要安装  
  
module.exports = {  
  //...省略代码
  plugins: [  
    new CompressionWebpackPlugin({
      algorithm: 'gzip',  
      threshold: 10240,  
      minRatio: 0.8
    })  
  ]  
}

合理配置 hash

我们要保证，改过的文件需要更新 hash 值，没改过的文件依然保持原本的 hash 值，这样才能保证在上线后，浏览器访问时没有改变的文件会命中缓存，从而达到性能优化的目的。

// webpack.base.js  
  
output: {  
    path: path.resolve(__dirname, '../dist'),  
    // 给js文件加上 contenthash  
    filename: 'js/chunk-[contenthash].js',  
    clean: true,  
},

小图片转base64

于一些小图片，可以转base64，这样可以减少用户的http网络请求次数，提高用户的体验。webpack5中url-loader已被废弃，改用asset-module。

// webpack.base.js

{
   test: /.(png|jpe?g|gif|svg|webp)$/,
   type: 'asset',
   parser: {
     // 转base64的条件
     dataUrlCondition: {
        maxSize: 25 * 1024, // 25kb
     }
   },
   generator: {
     // 打包到 image 文件下
    filename: 'images/[contenthash][ext][query]',
   },
},

如何用 webpack 来优化前端性能？

thred-loader 多进程打包

cache-loader 缓存资源

合理设置 exclude & include

开启热更新

配置 resolve.modules 指定 webpack 查找第三方模块范围

构建区分环境

使用 webpack 新版本

压缩 CSS 代码

压缩 JS 代码

压缩 HTML 代码

压缩图片

按需加载

tree shaking

作用域提升

代码分割

Proload & Prefetch

source-map类型

模块懒加载

Gzip

合理配置 hash

小图片转base64