跳到主要内容

认识

2024年11月17日
柏拉文
越努力，越幸运

一、认识​

Webpack 默认会将尽可能多的模块代码打包在一起，一般来说，如果不对产物进行代码分割(或者拆包)，全部打包到一个 chunk 中, 优点是能减少最终页面的 HTTP 请求数，但缺点也很明显:

  1. 页面初始代码包过大，影响首屏渲染性能。也就是说: 首屏加载的代码体积过大，即使是当前页面不需要的代码也会进行加载。

  2. 无法有效应用浏览器缓存，特别对于 NPM 包这类变动较少的代码，业务代码哪怕改了一行都会导致 NPM 包缓存失效。也就是说: 线上缓存复用率极低，改动一行代码即可导致整个 bundle 产物缓存失效。

Webpack 提供了多种方式进行 代码分割（Code Splitting），以优化应用的加载性能。通过代码分割，可以将应用代码按需加载（lazy loading），减少初始加载时间，提高运行效率。以下是 Webpack 支持的所有代码分割方式:

  • Entry Points （多入口）: 通过配置多个 entry，将应用的不同部分分成独立的入口文件。

  • Dynamic Link Library (动态链接库) ，简称 DLL: 通过 DllPlugin 和 DllReferencePlugin，将依赖分割成动态链接库。

  • Dynamic Imports （动态导入）: 使用动态导入 (import())，将代码分割为按需加载的模块。这种方式适用于路由级别的分割和按需加载。

  • SplitChunksPlugin: Webpack 内置的 SplitChunksPlugin，用于分割代码中的公共模块。通过此插件，可以将共享依赖抽取到单独的文件中。