性能优化, 可以分为三个方面:

构建性能
主要指开发阶段的构建性能, 降低从打包开始到代码呈现效果所经过的时间
传输性能
指打包后的js代码传输到浏览器经过的时间. 优化传输性能要考虑到
1. 总传输量
2. 文件数量
3. 浏览器缓存
运行性能
指js代码在浏览器端的运行速度, 主要取决于如何书写高性能代码

构建性能

1. 减少模块解析

模块解析包括: 抽象语法树分析, 依赖分析, 替换依赖函数等.

哪些模块不需要解析?

模块中无其他依赖: 一些已经打包好的第三方库, 比如jquery

如何让webpack不解析某些模块?

配置noParse

2. 优化loader性能

进一步限制loader的应用范围
使用exlucde或include排除或仅包含需要应用loader的场景(在每个module下, 每个rule配置对象内)
缓存loader结果
使用cache-loader缓存loader(它必须放在所有loader第一位)
loader是倒序运行的, cache-loader放第一位却能控制其他loader是否执行, 是因为其实loader运行还包括一个过程, 即pitch. pitch是loader函数的静态属性, 它也是一个函数, 这个函数有一个参数是文件的路径, 如果这个函数返回文件内容, 那么直接交给到配置里它的前一个loader去执行, 如果pitch函数没返回, 那么把路径按照配置的顺序交到下一个loader的pitch函数. 直到最后一个loader, pitch函数都没返回, 才读取文件内容, 然后开始倒序交给一个一个loader处理.
为loader的运行开启多线程
thread-load可以开启一个线程池, 后续的loader会放到线程池中运行.但是后续的loader不能:
- 使用webpack api生成文件
- 使用自定义的plugin api
- 访问webpack options

3. 热替换

热替换并不能降低构建时间, 但是能降低代码改动到效果呈现的时间.

a) 更改配置

module.exports = {
    devServer: {
        hot: true
    },
    plugins: [
        // 可选, webpack 4之后如果设置了hot: true, 默认使用这个插件
        new webpack.HotModuleReplacementPlugin()
    ]
}

b) 更改代码

if (module.hot) {
    module.hot.accept();
}

样式热替换: 使用style-loader可以进行热替换. 但是如果用mini-css-extract-plugin, 由于它生成文件是在构建期间, 运行期间无法改动文件, 热替换对它无效

传输性能

1. 分包

什么是分包?

将一个整体的代码, 分布到不同的打包文件中

为什么要分包?

减少公共代码, 降低总体积(特别是一些大型的第三方库)
充分利用浏览器缓存

什么时候要分包?

多个chunk引入了公共模块
公共模块体积较大或较少变动

如何分包?

手动分包
步骤:
- 打包公共模块, 生成manifest.json资源清单
- 使用公共模块, 此时代码中引入公共模块的时候, 就不再把公共模块代码引入打包
打包公共模块是另外的过程, 需要单独使用另一个配置文件, 专门配置, 如:

const webpack = require("webpack");
const path = require("path");

module.exports = {
    mode: "production",
    entry: {
        jquery: ["jquery"],
        lodash: ["lodash"]
    },
    output: {
        filename: "dll/[name].js",
        // 打包结果暴露的全局变量名
        library: "[name]"
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.resolve(__dirname, "dll", "[name].manifest.json"),
            name: "[name]"
        })
    ]
}

然后要在源代码的配置文件中:

重新设置clean-webpack-plugin, 避免它清除公共模块
在模板html中手动引入公共模块
使用DllReferencePlugin, 如

plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ["**/*", "!dll", "!dll/*"]
        }),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new webpack.DllReferencePlugin({
            manifest: require("./dll/jquery.manifest.json")
        }),
        new webpack.DllReferencePlugin({
            manifest: require("./dll/lodash.manifest.json")
        }),
    ]

自动分包
自动分包现在由webpack根据分包策略配置自动完成. webpack有默认的分包配置, 能够在绝大多数情况下都适用.
详细配置见官网, 大致配置如下:

module.exports = {
    optimization: {
        // 分包策略的配置
        splitChunks: {
            ...
        }
    }
}

2. 代码压缩

webpack自动集成了terser(一个代码压缩工具)
在生产环境下, webpack使用 terser自动完成压缩.

3. tree shaking

能够使得单模块体积优化. 可以移除模块之间的无效代码. (某些模块的导出的代码不一定用到, tree shaking用于移除掉不会用到的部分)

webpack 2开始就支持了tree shaking, 只要是生产环境, tree shaking自动开启.

原理

webpack会从入口模块出发寻找依赖关系.

当解析一个模块时, webpack会根据es6的模块导入语句来判断, 该模块依赖了另一个模块的哪个导出.
webpack之所以选择es6的模块导入语句, 是因为es6模块有以下特点:

导入导出语句只能是顶层语句
import的模块名只能是字符串常量
import绑定的常量是不可变的

这些特征都非常有利于分析出稳定的依赖.

如果依赖的是一个导出的对象, 由于js语言动态的特性, 为了保证代码正常运行, 它不会移除对象中的任何信息.

因此, 我们在编写代码的时候, 尽量:

使用export xxx导出, 而不是export default {xxx}导出
使用import {xxx} from "xxx"导入或import * as xxx from "xxx"导入, 而不使用import xxx from "xxx"导入

依赖分析完毕后, webpack会根据每个模块每个导出是否被使用, 标记其他导出为dead code, 然后交给代码压缩工具移除dead code.

4. 懒加载

懒加载指在运行时再动态加载需要的文件.

直接看示例代码

const btn = document.querySelector("button");
btn.onclick = async function () {
    
    // 动态加载
    // import(xxx)是es6的草案, 不是正式标准
    // 此处可以想象为浏览器使用jsonp的方式远程去读取一个js模块
    // 这里被import的内容会被单独打包成一个js
    // import()会返回一个promise, 结果类似于(* as obj)
    const _ = await import(/* webpackChunkName: "lodash */"lodash-es");
    const result = _.chunk([3, 5, 6, 89, 1, 31], 2);
    console.log(result);
}

5. gzip

客户端 - -服务器传输之间, 有可能会对传输内容进行压缩. 浏览器发送请求时可以设置Accept-Encoding来告诉服务器支持哪些压缩方式, 服务器就可以返回压缩后的资源文件给客户端.

webpack可以使用compression-webpack-plugin来对打包内容进行压缩(增加输出压缩后的文件, 而不是只输出压缩后的文件)

webpack性能优化