暂无

二、CSS

1、清除浮动

1
2
3
4
5
6
7
8
9
10
11
12
13

// 清除浮动（双伪元素）
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
// ie6 7 专门清除浮动的样式
.clearfix {
  *zoom: 1;
}

清除浮动的原理

clear:both清除浮动的关键

clear是CSS中的定位属性，规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素。

clear属性只能在块级元素上其作用，这就是清除浮动样式中display:table的作用。

三、JavaScript

1、基于URLSearchParams或URL获取queryString的值

测试链接：

https://cf.cmpay.com/mpl/credit_orderResult.html?orderNo=50620520605&orderDate=2052

URLSearchParams

1
2
3
4
5
6
7

// location.search 取到的是"?orderNo=50620520605&orderDate=2052"

const urlSP = new URLSearchParams(location.search);
function getQueryString(key) {
return urlSP.get(key)
}
getQueryString('orderNo') // 50620520605

URL

1
2
3
4
5

const urlObj = new URL(location.href);
function getQueryString(key) {
return urlObj.searchParams.get(key)
}
getQueryString('orderNo') // 50620520605

2、基于atob和btoa的base64编码和解码

浏览器内置了base64编码和解码的能力

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
# unescape() 函数可对通过 escape() 编码的字符串进行解码
# btoa() 方法用于创建一个 base-64 编码的字符串
# atob() 方法用于解码使用 base-64 编码的字符串

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"

3、相对地址转换为绝对地址

1
2
3
4
5
6
7
8

function realativeToAbs(href) {
    let aEl = document.createElement("a");
    aEl.href = href;
    const result = aEl.href;
    aEl = null;
    return result;
}
realativeToAbs("../a/b/b/index.html") // http://127.0.0.1:5500/a/b/b/index.html

4 、禁止图片拖拽、禁止右键、禁止选择、禁止复制

1
2
3
4
5
6

['dragstart','contextmenu', 'selectstart', 'copy'].forEach(function (ev) {
    document.addEventListener(ev, function (ev) {
        ev.preventDefault();
        ev.returnValue = false;
    })
});

5、es6的解构赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}

#吐槽：
const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;

#改进：
const {a,b,c,d,e} = obj;

#其他：
// 属性名和变量名不一样时
let { a: f, b: l } = obj;
f // 1
l // 2

// 指定默认值
let { x = 11 } = {};
let [a = 66] = [];
x // 11
a // 66

注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。

const {a,b,c,d,e} = obj || {};

6、合并数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#吐槽：
const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

const obj1 = { a: 1, b: 33 }
const obj2 = { b: 2, c: 66 }
const obj = Object.assign({}, obj1, obj2) //{a: 1, b: 2, c: 66} 属性名相同最后对象覆盖前面对象


#改进：
const a = [1, 2, 3];
const b = [1, 5, 6];
const c = [...a, ...b] //[1,2,3,1,5,6] 不去重
const c = [...new Set([...a, ...b])] //[1,2,3,5,6] 去重

const obj1 = { a: 1, b: 33 }
const obj2 = { b: 2, c: 66 }
console.log({...obj1, ...obj2}); //{a: 1, b: 2, c: 66}

7、关于拼接字符串

1
2
3
4
5
6
7
8
9
10
11
12
13

const name = '小明';
const score = 59;

#吐槽：
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}

#改进：
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`; // 小明的考试成绩不及格

8、扁平化数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}


#吐槽：
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]  // [1, 2, 3, 5, 8, 12, 14, 79, 64, 105]

#改进：
let member = Object.values(deps).flat(Infinity); // [1, 2, 3, 5, 8, 12, 14, 79, 64, 105]

9、添加对象属性

1
2
3
4
5
6
7
8
9
10

#吐槽：
let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '话题内容';

#改进：es6
let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';

10、非空的判断

空值合并操作符（??）

只有当左侧为null和undefined时，才会返回右侧的值

1
2
3

if(a === null || a === undefined) {    
doSomething()
}

也就是如果需要验证一个值是否等于null或者undefined，可以使用null合并操作符来简化上面的代码。

1

a ?? doSomething()

这样，仅当 a 未定义或为空时，才会执行控制合并运算符之后的代码。空合并运算符 ??是一个逻辑运算符，当左侧操作数为 null 或未定义时返回其右侧操作数，否则返回左侧操作数。

例子：

1
2
3
4
5
6
7
8
9
10
11

const nullValue = null;
const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默认值"
console.log(valB); // ""（空字符串虽然是假值，但不是 null 或者 undefined）
console.log(valC); // 42

11、获取对象属性值

可选链操作符 （?.）

1
2
3
4
5

#吐槽：
const name = obj && obj.name;

#改进：es6
const name = obj?.name;

12、html编码和解码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#1.用浏览器内部转换器实现html编码（转义）
htmlEncode: function (html) {
    //1.首先动态创建一个容器标签元素，如DIV
    var temp = document.createElement("div");
    //2.然后将要转换的字符串设置为这个元素的innerText或者textContent
    (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
    //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
    var output = temp.innerHTML;
    temp = null;
    return output;
}
console.log(htmlEncode("<div class='demo'>测试</div>"));

#2.用浏览器内部转换器实现html解码（反转义）
htmlDecode: function (text) {
    //1.首先动态创建一个容器标签元素，如DIV
    var temp = document.createElement("div");
    //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
    temp.innerHTML = text;
    //3.最后返回这个元素的innerText或者textContent，即得到经过HTML解码的字符串了。
    var output = temp.innerText || temp.textContent;
    temp = null;
    return output;
}
console.log(htmlDecode("&lt;div class='demo'&gt;测试&lt;/div&gt;"));

13、箭头函数

var func = () => ({ foo: 1 }); 返回的是括号里面的对象

1
2
3
4

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ? () => alert('Hello') : () => alert("Greetings!");
welcome();

重要特性

1）没有arguments

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 1、普通函数中的arguments正确使用：
function foo(n) {   
 // arguments[0] 表示传给foo函数的第一个参数，也就是n    
    var f = () => arguments[0] + n;    
    return f();
}
foo(1); // 2
foo(3); // 6
foo(3, 2);//6


# 2、箭头函数中无法使用arguments
// ReferenceError: arguments is not defined
var func = (a, b) => {return arguments[0];}

2）没有prototype属性

1
2

var Foo = () => {};
console.log(Foo.prototype); // undefined

3）不能使用new

箭头函数没有this，不能用作构造函数，也就无法使用 new

1
2

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

14、初始化一个数组

如果你想初始化一个指定长度的一维数组并指定默认值，你可以这样做。

1
2

const array = Array(6).fill(''); 
// ['', '', '', '', '', '']

如果你想初始化一个指定长度的二维数组并指定默认值，你可以这样做。

1
2
3
4
5
6
7
8
9

const matrix = Array(6).fill(0).map(() => Array(5).fill(0)); 
// [
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// ]

15、数组求和/最大值/最小值

1

const array  = [5,4,7,8,9,2];

1）求和 

1

array.reduce((a,b) => a+b);

2）寻找最大值

1

array.reduce((a,b) => a > b ? a : b);  Math.max(...array)

2）寻找最小值

1

array.reduce((a,b) => a < b ? a : b);  Math.min(...array)

请记住：数组的reduce方法可以用来解决很多数组求值问题。

16、滤错误值

如果要过滤数组中的值，例如 false、0、null、undefined 等，可以这样做。

1
2
3

const array = [1, 0, undefined, 6, 7, '', false];
array.filter(Boolean);
// [1, 6, 7]

17、空数组

如果要清空数组，可以将数组的长度设置为 0。

1
2
3

let array = ["A", "B", "C", "D", "E", "F"]
array.length = 0 
console.log(array)  // []

18、计算性能

以下操作可用于计算代码的性能。

1
2
3
4
5
6
7

const startTime = performance.now(); 
for(let i = 0; i < 1000; i++) {    
console.log(i)
}
const endTime = performance.now();
const totaltime = endTime - startTime;
console.log(totaltime); // 10.3333333

19、将数组元素转换为数字

如果有一个数组，并且你想将数组的元素转换为数字，你可以使用 map 方法来完成。

1
2

const array = ['12', '1', '3.1415', '-10.01'];
array.map(Number);  // [12, 1, 3.1415, -10.01]

这样，map 对数组的每个元素执行 Number 构造函数，并在遍历数组时返回结果。

20、将类数组转换为数组

可以使用以下方法将类数组转换为数组。

1

Array.prototype.slice.call(arguments);

此外，还可以使用扩展运算符来实现。

1

[...arguments]

21、对象属性的动态声明

如果你想动态地为一个对象声明属性，你可以这样做。

1
2
3
4
5
6

const dynamic = 'color';
var item = {    
brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); // { brand: "Ford", color: "Blue" }

22、缩短console.log()

每次debug都要写很多console.log()会比较麻烦，可以用下面的形式来简化这段代码。

1
2
3

const c = console.log.bind(document) 
c(222) 
c("hello world")

这将每次只执行 c 方法。

23、删除数组元素

如果我们想删除一个数组的元素，可以使用delete来完成，但是删除后元素会变成undefined，不会消失，而且执行会消耗很多时间，所以大部分情况下不会满足我们的需求。所以我们可以使用数组的 slice() 方法来删除数组的元素。

1
2
3
4

const array = ["a", "b", "c", "d"]
const arrayRemoveed = array.splice(0, 2)
console.log(array)  // ["c", "d"]
console.log(arrayRemoveed)  // ["a", "b"]

24、检查对象是否为空

如果我们想检查对象是否为空，我们可以使用以下内容。

1
2

Object.keys({}).length  // 0
Object.keys({key: 1}).length  // 1

Object.keys() 方法用于获取对象的键，它将返回一个包含这些键值的数组。如果返回数组的长度为 0，则该对象必须为空。

25、获取数组中的最后一项

1

const arr = [1, 2, 3, 4, 5];

1、如果要获取数组中的最后一项，通常会这样编写代码。

1

arr[arr.length - 1]  // 5

2、我们也可以使用数组的 slice 方法来获取最后一个元素。

1

arr.slice(-1) // 5

当我们将 slice 方法的参数设置为负值时，它会从数组后面开始截取数组值，如果要截取最后两个值，则传入参数-2。

3、使用“at方法”读取

1
2

array.at(-1) // 5
array.at(0) // 1

26、数组元素的随机排序

1
2
3
4
5

const arr = [2,3,6,9,7,4,11,99,7,1,6,5,7,]
const newArr = arr.map(val => ({ v: val, r: Math.random() }));
newArr.sort((a, b) => a.r - b.r);
const showList = newArr.map(val => val.v).slice(0, 6); // 截取长度未6的随机数组
console.log(showList)

四、Vue

1、computed中使用this？

我们通过this能访问到的数据，在computed的第一个参数上都能结构出来

1
2
3
4
5
6
7
8
9
10
11
12
13

export default {
    data() {
        return {
            address: '黄山',
        }
    },
    computed: {
        haha({ address, $attrs, $route, $store, $listeners, $ref }) {
            console.log(address) // 黄山
            return 111
        }
    }
}

2、避免v-if和v-for一起使用

在vue的源码中有一段代码是对指令的优先级的处理

不好的

1
2
3
4
5
6
7
8
9
10

#吐槽：
# 这段代码是先处理v-for再处理v-if的
// 比如这个列表有一百条数据，再某种情况下，它们都不需要显示，当vue还是会循环这个100条数据显示，再去判断v-if，因此，我们应该避免这种情况的出现。

<h3 v-if="status" v-for="item in 100" :key="item">{{item}}</h3>

#优化
<template v-if="status" >
<h3 v-for="item in 100" :key="item">{{item}}</h3>
</template>

3、修饰符sync

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// 父组件
template>
  <div>
    <Toggle :show.sync = 'isShow'></Toggle>
  </div>
</template>
<script>
    export default {
data () {
    return {
        isShow: true
    }
  }
}
<script>  
 
# 等同于上面的写法

// 父组件
template>
  <div>
    <Toggle :show = 'isShow' @update:show="change"></Toggle>
  </div>
</template>
<script>
    export default {
props:{
            isShow: {
            type: Boolean
        }
        },
data () {
    return {
        isShow: true
    }
  },
        method: {
            change(val) { // 子组件传来的false
                this.isShow = val
            }
        }
}
<script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 子组件
<template>
  <div>
    <div v-if="show">
    展示和隐藏组件
  </div>
  <button @click="test">隐藏组件</button>
  </div>
</template>
<script>

export default {
  props:['show'],
  methods: {
    test(){
      this.$emit('update:show',false) //触发 input 事件，并传入新值
    }
  }
}
</script>

五、IOS和安卓踩坑

1、IOS滑动不流畅

表现

上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。

为什么 iOS 的 webview 中 滑动不流畅，它是如何定义的？

原来在 iOS 5.0 以及之后的版本，滑动 -webkit-overflow-scrolling 有定义有两个值 auto 和 touch，默认值为 auto

1
2
3

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */

-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

解决方案

1）在 滚动容器上 增加滚动 touch 方法 

将-webkit-overflow-scrolling 值设置为 touch

1
2
3

.wrapper {
    -webkit-overflow-scrolling: touch;
}

设置滚动条隐藏： .container ::-webkit-scrollbar {display: none;}

可能会导致使用position:fixed; 固定定位的元素，随着页面一起滚动

2）设置 overflow

设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。

1
2
3
4
5
6

body {
    overflow-y: hidden;
}
.wrapper {
    overflow-y: auto;
}

两者结合使用更佳！

2、click 点击事件延时与穿透

表现

监听元素 click 事件，点击元素触发时间延迟约 300ms。点击蒙层，蒙层消失后，下层元素点击触发。

为什么会产生 click 延时？

iOS 中的 safari，为了实现双击缩放操作，在单击 300ms 之后，如果未进行第二次点击，则执行 click 单击操作。也就是说来判断用户行为是否为双击产生的。但是，在 App 中，无论是否需要双击缩放这种行为，click 单击都会产生 300ms 延迟。

为什么会产生 click 点击穿透？

双层元素叠加时，在上层元素上绑定 touch 事件，下层元素绑定 click 事件。由于 click 发生在 touch 之后，点击上层元素，元素消失，下层元素会触发 click 事件，由此产生了点击穿透的效果

原理与解决方案

1）使用 touchstart 替换 click

移动设备不仅支持点击还支持触摸事件。那么我们现在基本思路就是用 touch 事件代替click 事件。

将 click 替换成 touchstart 不仅解决了 click 事件延时问题，还解决了穿透问题。因为穿透问题是在 touch 和 click 混用时产生。

在原生中使用

1

el.addEventListener("touchstart", () => { console.log("ok"); }, false);

在 vue 中使用

1

<button @touchstart="handleTouchstart()">点击</button>

开源解决方案中，也是既提供了 click 事件，又提供了touchstart 事件。如 vant 中的 button 组件

2）使用 fastclick 库

使用 npm/yarn 安装后使用

1
2
3

import FastClick from 'fastclick';

FastClick.attach(document.body, options);

同样，使用fastclick库后，click 延时和穿透问题都没了

3、软键盘将页面顶起来、收起未回落问题

表现

Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。

移开焦点时，键盘收起，键盘区域空白，未回落。

产生原因

我们在app 布局中会有个固定的底部。安卓一些版本中，输入弹窗出来，会将解压 absolute 和 fixed 定位的元素。导致可视区域变小，布局错乱。

原理与解决方案

软键盘将页面顶起来的解决方案，主要是通过监听页面高度变化，强制恢复成弹出前的高度。

1
2
3
4
5
6
7
8
9
10
11

// 记录原有的视口高度
const originalHeight = document.body.clientHeight || document.documentElement.clientHeight;

window.onresize = function(){
  var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
  if(resizeHeight < originalHeight ){
    // 恢复内容区域高度
    // const container = document.getElementById("container")
    // 例如 container.style.height = originalHeight;
  }
}

键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。

兼容原理，1.判断版本类型 2.更改滚动的可视区域

1
2
3
4
5
6
7
8
9

const isWechat = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if (!isWechat) return;
const wechatVersion = wechatInfo[1];
const version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
 
 // 如果设备类型为iOS 12+ 和wechat 6.7.4+，恢复成原来的视口
if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
  window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
}

window.scrollTo(x-coord, y-coord)，其中window.scrollTo(0, clientHeight)恢复成原来的视口

📚 本指南旨在帮助开发者深入掌握 Webpack 5 的代码分割技术，从基础原理到生产环境的高级配置一应俱全。

目录

1. 为什么需要代码分割
2. 代码分割的三种方式
3. 入口起点分割
4. SplitChunksPlugin 详解
5. 动态导入（Dynamic Import）
6. 魔法注释（Magic Comments）
7. 代码分割统一命名规范
8. 预获取与预加载
9. Tree Shaking 与代码分割的协同
10. 实战：完整的代码分割配置方案
11. 分析与优化
12. 针对不同类型项目的配置建议

一、为什么需要代码分割

在一个未经优化的 Webpack 项目中，所有代码会被打包成 一个巨大的 bundle 文件。这带来几个严重问题：

1. 首屏加载慢：用户必须下载全部代码（包括当前页面根本不需要的部分）才能看到页面内容。
2. 缓存利用率低：修改任何一行代码，整个 bundle 的 hash 都会变化，用户需要重新下载一切。
3. 并行加载受限：浏览器的并发请求能力被浪费，只需下载一个文件却不能利用多连接并行。

代码分割（Code Splitting） 的核心思想就是：把一个大 bundle 拆成多个更小的 chunk，按需加载或并行加载。

1
2
3
4
5
6
7
8
9
10
11

┌──────────────────────────────────────────────┐
│                                              │
│        未分割：一个巨大的 bundle.js            │
│        (所有页面、所有库、所有逻辑)             │
│                                              │
└──────────────────────────────────────────────┘
                    ↓ 代码分割后
┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐
│ vendor.js│  │  main.js │  │ pageA.js │  │ pageB.js │
│(第三方库) │  │(公共逻辑) │  │(按需加载) │  │(按需加载) │
└──────────┘  └──────────┘  └──────────┘  └──────────┘

二、代码分割的三种方式

Webpack 提供了三种方式实现代码分割，它们可以组合使用：

三、入口起点分割(不常用)

3.1 基础多入口配置

最简单的代码分割方式是手动在配置中指定多个入口：

1
2
3
4
5
6
7
8
9
10
11
12
13

// webpack.config.js
module.exports = {
  // ./src/app.js'，只有一个入口文件，单入口
  entry: {
    // 有多个文，多入口
    app: "./src/app.js",
    admin: "./src/admin.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash:8].js",
  },
};

这样会生成 app.xxx.js 和 admin.xxx.js 两个独立的 bundle。

3.2 问题：重复打包

假设 app.js 和 admin.js 都引入了 lodash，那么 lodash 会被 打包两次，分别出现在两个 bundle 中。这显然是一种浪费。

1
2
3
4
5
6
7

// src/app.js
import _ from "lodash";
console.log(_.join(["App", "Module"], " "));

// src/admin.js
import _ from "lodash";
console.log(_.join(["Admin", "Module"], " "));

打包结果（未去重时）：

1
2

app.abcd1234.js    → 包含 lodash + app 逻辑（约 70KB + 1KB）
admin.efgh5678.js  → 包含 lodash + admin 逻辑（约 70KB + 1KB）

lodash 被重复包含了两次！这就需要 SplitChunksPlugin 来解决了。

3.3 使用 dependOn 共享模块

Webpack 5 提供了 dependOn 选项来手动声明入口间的依赖关系。根据共享模块的数量，有以下几种配置方式：

1）场景一：共享单个模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

module.exports = {
  entry: {
    // 把 lodash 单独声明为一个共享入口
    shared: "lodash",
    app: {
      import: "./src/app.js",
      dependOn: "shared",
    },
    admin: {
      import: "./src/admin.js",
      dependOn: "shared",
    },
  },
  output: {
    filename: "[name].[contenthash:8].js",
    path: path.resolve(__dirname, "dist"),
  },
};

打包结果（去重后）：

1
2
3

shared.xxxx.js  → 只包含 lodash（约 70KB）
app.xxxx.js     → 只包含 app 自身逻辑（约 1KB）
admin.xxxx.js   → 只包含 admin 自身逻辑（约 1KB）

2）场景二：共享多个模块

如果入口文件共同依赖了多个第三方库（如 lodash, axios, react 等），你可以通过数组组合或拆分多个共享块来实现。

方案 A：将多个依赖合并为一个公共 Chunk

如果这些依赖体积总和不大，且更新频率相似，可以将它们放在一个数组中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

module.exports = {
  entry: {
    // 将多个常用依赖打包到一个名为 commonVendor 的 chunk 中
    commonVendor: ["lodash", "axios", "dayjs"],
    app: {
      import: "./src/app.js",
      dependOn: "commonVendor",
    },
    admin: {
      import: "./src/admin.js",
      dependOn: "commonVendor",
    },
  },
};

方案 B：将依赖拆分为多个公共 Chunk

如果依赖库职责不同（例如基础 UI 库与工具函数库分开），可以定义多个独立入口，并在 dependOn 中传入数组：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

module.exports = {
  entry: {
    utils: ["lodash", "axios"],
    reactVendor: ["react", "react-dom"],
    app: {
      import: "./src/app.js",
      // dependOn 接收数组，表示同时依赖多个共享块
      dependOn: ["utils", "reactVendor"],
    },
    admin: {
      import: "./src/admin.js",
      // admin 也许只需要工具库
      dependOn: ["utils"],
    },
  },
};

3）场景三：共享本地自定义模块

dependOn 的底层逻辑是提取另一个入口 chunk 中的模块，这种“共享”不局限于 node_modules 中的第三方库。你完全可以将自己封装的公用代码（比如一套业务专用的工具函数库、全局状态管理等）提取为一个共享入口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

module.exports = {
  entry: {
    // 将自己的本地模块作为一个独立的入口配置
    myUtils: "./src/utils/index.js",
    app: {
      import: "./src/app.js",
      dependOn: "myUtils",
    },
    admin: {
      import: "./src/admin.js",
      dependOn: "myUtils",
    },
  },
};

适用情况：

• 你的多个入口应用（如前台和后台）都重度使用了同一个自建组件库或工具集。
• 你希望将这些相对稳定的自建库与频繁变动的业务逻辑拆分，以利用浏览器缓存。

注意与释疑：配置了多个入口（entry），不代表所有入口都会放在同一个 HTML 页面里。

1. 多页应用（MPA）场景：如果是各自独立的 HTML 页面（比如 app.html 只引入 app.js，admin.html 只引入 admin.js），此时每个页面只加载一个入口脚本，运行时不会冲突。
2. 同一页面加载多入口场景：而在本例的 dependOn 配置中，shared.js 和 app.js 通常会被同时注入到同一个 HTML 页面中。这种情况下，必须设置 optimization.runtimeChunk: 'single'，提取出一个公共的 Webpack 运行时（Runtime）。否则 shared 和 app 将各自包含一套独立的 Webpack 模块加载与解析逻辑，这会导致全局变量冲突、模块重复实例化等严重的意外问题。
3. 单页面应用（SPA）适用吗？：不适用，也没有必要。 绝大多数 Vue/React 单页面应用通常只有一个核心入口文件（如 src/main.js 或 src/index.js）。既然没有“多个”入口，就不存在“跨入口提取共享模块”的需求。对于 SPA：
   • 若想抽离第三方库（如 vue, react, lodash），请使用下一节介绍的 SplitChunksPlugin。
   • 若想实现路由级别的按需加载，请配合使用稍后介绍的动态导入（Dynamic Import）。

1
2
3
4
5
6

module.exports = {
  // ...entry 配置同上
  optimization: {
    runtimeChunk: "single",
  },
};

四、SplitChunksPlugin 详解

4.1 默认行为

SplitChunksPlugin 是 Webpack 内置的、也是最核心的代码分割工具。它会自动分析模块间的依赖关系，把满足条件的公共模块提取到单独的 chunk 中。

即使你不做任何配置，Webpack 5 也有一套默认的分割策略：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// Webpack 5 的默认配置（等价写法）
module.exports = {
  optimization: {
    splitChunks: {
      chunks: "async", // 只对异步加载的模块进行分割
      minSize: 20000, // 生成 chunk 的最小体积（约 20KB）
      minRemainingSize: 0, // 分割后剩余 chunk 的最小体积
      minChunks: 1, // 模块至少被引用 1 次才会被分割
      maxAsyncRequests: 30, // 按需加载时最大并行请求数
      maxInitialRequests: 30, // 入口点的最大并行请求数
      enforceSizeThreshold: 50000, // 超过50kb强制分割，忽略其他限制
      cacheGroups: {
        // 组，哪些模块要打包到一个组
        defaultVendors: {
          // 组名
          test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块
          priority: -10, // 优先级（越大越高）
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2, // 模块至少被引用 2 次才会被分割
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

关键点：默认 chunks: 'async' 意味着只对动态 import() 导入的模块生效。如果你也想提取同步引用的第三方库（比如 import lodash from 'lodash'），需要改成 'all'。

4.2 chunks 选项详解

chunks 是一个非常关键的选项，它决定了哪些 chunk 参与分割优化：

1
2
3
4
5
6

splitChunks: {
  // 字符串形式
  chunks: "async"; // 默认值，只处理异步 chunk（动态 import）
  chunks: "initial"; // 只处理同步 chunk（静态 import）
  chunks: "all"; // 推荐！同步和异步 chunk 都处理
}

三种模式的区别（以 lodash 为例）：

1
2

// 场景：入口文件同步引用了 lodash
import _ from "lodash";

1
2

// 场景：代码中动态引用了 lodash
const _ = await import("lodash");

chunks 也可以传入一个函数来做更精细的控制：

1
2
3
4
5
6

splitChunks: {
  chunks(chunk) {
    // 排除名为 'my-excluded-chunk' 的 chunk
    return chunk.name !== 'my-excluded-chunk'
  }
}

4.3 cacheGroups 缓存组

cacheGroups（缓存组）是 SplitChunksPlugin 的灵魂。它允许你自定义分组规则，指定哪些模块应该被归入哪个 chunk。

1）匹配流程

1
2
3
4
5
6
7
8
9
10

模块被引入
  ↓
遍历所有 cacheGroup 规则
  ↓
模块匹配到多个 group？ → 按 priority 取最高者
  ↓
满足 minSize / minChunks 等条件？
  ↓
是 → 提取到对应 chunk
否 → 留在原始 bundle 中

2）完整配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      // 第三方库统一打包
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        priority: 10
      },

      // 将 React 全家桶单独打包（因为版本稳定，利于长期缓存）
      react: {
        test: /[\\/]node_modules[\\/](react|react-dom|react-router|react-router-dom)[\\/]/,
        name: 'react-vendor',
        chunks: 'all',
        priority: 20  // 优先级高于 vendors，所以 React 相关的不会被归到 vendors
      },

      // UI 组件库单独打包
      antd: {
        test: /[\\/]node_modules[\\/](antd|@ant-design)[\\/]/,
        name: 'antd-vendor',
        chunks: 'all',
        priority: 20
      },

      // 项目内部的公共模块
      commons: {
        name: 'commons',
        minChunks: 2,     // 至少被 2 个 chunk 引用
        chunks: 'all',
        priority: 5,
        reuseExistingChunk: true
      }
    }
  }
}

3）cacheGroup 的核心属性

4）深度解析：reuseExistingChunk

reuseExistingChunk: true 这个配置虽然默认开启，但很多人不理解它的具体作用。

它的核心思想是：避免重复打包已经被分离出去的模块。

🤔 场景演示：
假设你有三个文件：A.js, B.js 和一个公共工具模块 utils.js。

1. A.js 引用了 utils.js。
2. B.js 引用了 A.js，同时也直接引用了 utils.js。

在配置 SplitChunksPlugin 提取公共模块时：

• Webpack 在处理 A.js 时，决定把 utils.js 提取出来，单独打成一个叫 chunk-utils.js 的文件。
• 接着 Webpack 处理 B.js。按照依赖分析，B.js 需要 A.js 和 utils.js。
• 此时，Webpack 发现 B.js 需要的 utils.js 已经在这个打包流程中被别人（A.js）提取成了一个独立的 Chunk (chunk-utils.js) 了。

如果不开启 reuseExistingChunk: false：
Webpack 可能会比较笨地再为 B.js 把 utils.js 重新打包一次（或者打包进 B.js 内部，或者生成一个新的重复 chunk）。

如果开启 reuseExistingChunk: true（推荐）：
Webpack 会很聪明地说：“哦，我已经有一个包含 utils.js 的 Chunk 了，那 B.js 直接去复用那个建立好的 chunk-utils.js 就行了，没必要再单独创建一份。”这样就极大地减小了打包体积，也提高了打包效率。

5）name 的函数用法

name 传入函数可以实现动态命名：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

cacheGroups: {
  vendors: {
    test: /[\\/]node_modules[\\/]/,
    // 根据模块路径生成 chunk 名称
    name(module) {
      // 获取包名，例如 node_modules/lodash/lodash.js → lodash
      const packageName = module.context.match(
        /[\\/]node_modules[\\/](.*?)([\\/]|$)/
      )[1]
      // npm 包名允许有 @ 前缀（如 @babel/core），但 @ 在 URL 中不安全
      return `vendor.${packageName.replace('@', '')}`
    }
  }
}

⚠️ 注意：在生产环境中不建议使用函数形式的 name，因为每个包一个 chunk 会导致 HTTP 请求过多。这里仅作演示。

4.4 体积相关的关键参数

1
2
3
4
5
6
7

splitChunks: {
  minSize: 20000,            // chunk 最小体积 20KB，低于则不分割
  maxSize: 250000,           // chunk 建议最大 250KB，超过则尝试继续拆分
  maxAsyncRequests: 30,      // 异步加载时的最大并行请求数
  maxInitialRequests: 30,    // 入口的最大并行请求数
  enforceSizeThreshold: 50000 // 强制分割阈值：超过 50KB 一定分割
}

maxSize 的工作方式：

maxSize 并不是一个硬限制（一个 chunk 可能因为无法继续拆分而超过此值），但 Webpack 会 尽量 把超出的 chunk 再次拆分。优先级关系为：

1

minSize（保底下限）> maxSize（建议上限）> maxInitialRequests/maxAsyncRequests（请求数上限）

也就是说，Webpack 绝不会因为 maxSize 而创建小于 minSize 的 chunk。

4.5 runtimeChunk 运行时代码提取

Webpack 的 runtime（运行时） 是指模块加载、解析、执行的基础代码。把它提取为单独文件可以避免在业务代码变化时导致 runtime 所在的 chunk hash 变化：

1
2
3
4
5
6
7
8
9
10
11
12

optimization: {
  // 方式一：所有入口共享一个 runtime chunk
  runtimeChunk: "single";

  // 方式二：每个入口各自拥有 runtime chunk
  // runtimeChunk: true

  // 方式三：自定义名称
  // runtimeChunk: {
  //   name: (entrypoint) => `runtime-${entrypoint.name}`
  // }
}

推荐使用 '方式一和方式三'，特别是对于单页面应用。

深度解析：为什么需要提取 runtimeChunk？

🤔 场景演示：
假设你的项目有两个文件：入口文件 main.js 和一个按需加载的 About.js（动态导入）。

1. 如果不提取（默认情况）：

   • Webpack 会把“模块映射关系”（即 runtime）打包进 main.js。
   • 如果你修改了 About.js 的内容，About.js 的 hash 肯定会变。
   • 关键点：由于 main.js 内部记录了 About.js 的新文件名，导致 main.js 的内容也发生了微小变化，因此 main.js 的 hash 也会被迫改变。
   • 结果：用户本来只需要重新下载最新的 About.js，现在却因为 runtime 的变动，不得不重新下载几百 KB 的 main.js（即使业务逻辑没变）。

2. 如果提取（runtimeChunk: ‘single’）：

   • Webpack 会产生一个微小的 runtime.js（专门存放映射关系）。
   • 如果你修改了 About.js，此时只有 runtime.js（记录了新映射）和 About.js 本身的 hash 会变。
   • 结果：主逻辑 main.js 的内容保持绝对不变，它的 hash 也不会变。这意味着浏览器可以直接从本地缓存读取 main.js，大大提升了二次访问速度。

[!TIP]
结论：在追求“长效缓存（Long-term Caching）”的项目中，提取 runtime 是标配操作。它通过牺牲一次微小的 HTTP 请求（runtime.js 通常只有几 KB），换取了大型业务 chunk 的缓存稳定性。

runtime.js 内部到底保存了什么？

简单来说，runtime.js 是 Webpack 在浏览器中的 “总调度指挥部”。它的核心内容通常包括：

1. 模块映射表（Manifest）：
   这是最重要的部分。它记录了所有模块 ID 与其对应的文件 Hash 之间的映射关系。

   1 2 3 4 5

   // 伪代码示例：映射表 { "about": "about.8f2d1a3b.chunk.js", "home": "home.c5e6d7f8.chunk.js" }

2. 核心加载逻辑：
   包含 Webpack 的模块加载函数（如 __webpack_require__）。它负责管理模块的初始化、缓存以及如何处理模块之间的循环依赖。
3. 异步分包加载指令：
   提供处理动态 import() 的底层代码。例如，它包含了如何动态创建 <script> 标签、如何监听下载进度、以及如何在脚本下载报错时进行处理的逻辑。
4. 环境支撑脚本：
   如果是开发环境，它还包含了支持 热更新（HMR） 的通信逻辑。

Hash 稳定性的精髓：间接引用

1
2
3
4
5

// 伪代码示例：映射表 `runtime.js` 
{
  "about": "about.8f2d1a3b.chunk.js",
  "home": "home.c5e6d7f8.chunk.js"
}

我们可以用 “查字典” 来类比这个过程：

• main.js（读者）：它手里拿的是模块 ID（索引）。比如它知道自己需要 about 这个模块，代码里写的是 __webpack_require__.e("about")。
• runtime.js（字典）：它保存了最新的页码映射（映射表）。它告诉读者：“你要找的 about，现在在 about.8f2d1a3b.js 这一页。”

为什么这样就能保护缓存？

1. 解耦：main.js 不再直接写死对方带 Hash 的完整文件名，而是通过一个永远不变的 ID（如数字 ID 或具名 ID）去询问 runtime.js。
2. 局部更新：当你修改了 about.js，它的 Hash 变了（变成 8f2d1a3b -> 9ec2b10a），字典（runtime.js）会更新这一行记录。
3. 缓存命中：因为 main.js 里的代码 __webpack_require__.e("about") 一个字都没改，所以它的 Hash 也不会变。浏览器发现 main.js 没变，就会直接命中磁盘缓存，不需要重新下载！

[!IMPORTANT]
一句话总结：runtime.js 充当了 Hash 变动的**“缓冲区”**。它吸收了所有因依赖版本更新而产生的 Hash 波动，从而保护了上层业务逻辑（main.js）的缓存有效性。

五、动态导入（Dynamic Import）

5.1 基础用法

动态导入是实现按需加载的核心手段。使用 ES 标准的 import() 语法, Webpack 会自动将目标模块拆分为独立的 chunk，并在运行时按需加载。

1. 基础用法

1
2
3
4
5
6
7

// 点击按钮时才加载并使用 lodash
document.getElementById("btn").addEventListener("click", async () => {
  // import() 返回一个 Promise
  const { default: _ } = await import("lodash");
  const result = _.join(["Hello", "webpack"], " ");
  console.log(result);
});

import('lodash') 做了两件事：

1. 在打包阶段，Webpack 会把 lodash 及其依赖从主 bundle 中拆分出来，生成一个独立的 chunk 文件。
2. 在运行阶段，当代码执行到 import('lodash') 时，才会通过 <script> 标签动态下载并执行这个 chunk。

5.2 路由级懒加载（React）

这是动态导入最常见的实战场景：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

// 使用 lazy + import() 实现路由级代码分割
// 每个路由组件都会被打包为独立的 chunk
const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));
const Dashboard = lazy(() => import("./pages/Dashboard"));
const UserProfile = lazy(() => import("./pages/UserProfile"));

const App = () => {
  return (
    <BrowserRouter>
      {/* Suspense 提供加载过渡 UI */}
      <Suspense fallback={<div>页面加载中...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/user/:id" element={<UserProfile />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
};

5.3 路由级懒加载（Vue）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// router/index.js
import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Home",
    // Vue 天生支持异步组件，直接使用 import() 即可
    component: () => import("../views/Home.vue"),
  },
  {
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue"),
  },
  {
    path: "/dashboard",
    name: "Dashboard",
    component: () => import("../views/Dashboard.vue"),
  },
];

export default createRouter({
  history: createWebHistory(),
  routes,
});

5.4 条件性按需加载

除了路由，还有很多场景适合动态导入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 场景一：用户触发了某个功能后才加载对应的库
const handleExport = async () => {
  // xlsx 库体积很大，只有用户点击"导出"时才加载
  const XLSX = await import("xlsx");
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  XLSX.writeFile(workbook, "export.xlsx");
};

// 场景二：根据运行环境加载不同模块
const loadEditor = async () => {
  if (isMobile()) {
    return import("./editors/MobileEditor");
  }
  return import("./editors/DesktopEditor");
};

// 场景三：大型可视化库按需加载
const renderChart = async (container, data) => {
  const echarts = await import("echarts");
  const chart = echarts.init(container);
  chart.setOption({
    /* ... */
  });
};

5.5 output.chunkFilename — 非入口 chunk 的命名模板

配合下，Webpack 会产出大量非入口 chunk。output.chunkFilename 就是专门控制这些文件命名格式的配置项，它可以独立使用，不依赖任何魔法注释。

1）filename vs chunkFilename 的分工

1
2
3
4
5
6
7
8

output: {
  // filename —— 只管【入口 chunk】的文件名（entry 直接对应的输出文件）
  filename: '[name].[contenthash:8].js',

  // chunkFilename —— 只管【非入口 chunk】的文件名
  //   包括：SplitChunksPlugin 拆出来的 + 动态 import() 产生的
  chunkFilename: '[name].[contenthash:8].chunk.js'
}

2）[name] 占位符的值由谁决定？

chunkFilename 模板中最关键的占位符是 [name]。它的值并非固定，而是取决于 chunk 的来源：

1
2
3
4
5
6
7

chunkFilename: '[name].[contenthash:8].chunk.js'
                  ↑
            ┌─────┴──────────────────────────────────┐
            │  SplitChunksPlugin 的 cacheGroup       │ → name 属性值（如 'vendors'）
            │  动态 import() + webpackChunkName 注释  │ → 注释指定的名称
            │  动态 import() 无任何注释                │ → Webpack 自动分配的数字 ID
            └────────────────────────────────────────┘

3）不配置 chunkFilename 会怎样？

如果你不显式设置 chunkFilename，Webpack 会回退到 filename 的值作为所有 chunk 的命名模板。这意味着入口文件和非入口 chunk 使用完全相同的命名规则，虽然功能上没有问题，但你会丧失通过文件名一眼区分”入口文件”和”拆分 chunk”的能力。

推荐做法：给 chunkFilename 加上 .chunk 后缀，方便在构建产物中快速辨认：

1
2
3
4

output: {
  filename: 'js/[name].[contenthash:8].js',           // 入口文件：app.a1b2c3d4.js
  chunkFilename: 'js/[name].[contenthash:8].chunk.js'  // 非入口：vendors.e5f6g7h8.chunk.js
}

六、魔法注释（Magic Comments）

Webpack 在 import() 中支持一系列特殊注释（魔法注释），用来精确控制分割行为。

6.1 webpackChunkName — 自定义 chunk 名称

默认情况下，动态 import() 产生的 chunk 会被分配一个纯数字 ID 作为名称（如 543）。通过 webpackChunkName 注释，你可以将其替换为有意义的可读名称，这个名称会填入上一节介绍的 chunkFilename 模板中的 [name] 占位符：

1
2
3
4
5

// 不加注释：[name] = 数字 ID → 生成 543.abcd1234.chunk.js
import("./pages/About");

// 加注释后：[name] = 'about-page' → 生成 about-page.abcd1234.chunk.js
import(/* webpackChunkName: "about-page" */ "./pages/About");

6.2 webpackMode — 控制动态导入模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// lazy：默认模式，为每个 import() 调用生成一个可延迟加载的 chunk
import(/* webpackMode: "lazy" */ `./locales/${language}`);

// lazy-once：只生成一个 chunk，适用于可能被请求多次的动态表达式
// 所有可能匹配到的模块都打包到同一个 chunk 中
import(/* webpackMode: "lazy-once" */ `./locales/${language}`);

// eager：不生成额外 chunk，模块被包含在当前 chunk 中
// 但仍然返回 Promise，适用于条件导入但不想多一次网络请求
import(/* webpackMode: "eager" */ `./locales/${language}`);

// weak：如果模块已经被其他方式加载了则使用它，否则 Promise 会 reject
// 适用于服务端渲染（SSR），避免客户端额外请求
import(/* webpackMode: "weak" */ `./locales/${language}`);

6.3 webpackInclude / webpackExclude — 过滤动态路径

当 import() 的路径包含变量时，Webpack 会把目录下所有可能匹配的文件都打包。用这两个注释可以缩小范围：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 假设 ./locales/ 目录下有 zh.js, en.js, fr.js, de.js, README.md 等文件

// 不过滤：所有文件都会被打包为可能的 chunk（包括 README.md）
import(`./locales/${lang}`);

// 过滤后：只打包 .js 结尾的文件
import(
  /* webpackInclude: /\.js$/ */
  `./locales/${lang}`
);

// 排除指定文件
import(
  /* webpackExclude: /\.test\.js$/ */
  `./locales/${lang}`
);

// 组合使用
import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /deprecated/ */
  `./data/${filename}`
);

6.4 webpackExports — 只导出指定成员

当你只使用模块的部分导出时，这个注释可以帮助 Webpack 做更激进的 Tree Shaking：

1
2
3
4
5
6

// 只使用 lodash-es 的 debounce 和 throttle
// Webpack 在打包时可以排除其他不相关的导出
import(
  /* webpackExports: ["debounce", "throttle"] */
  "lodash-es"
);

6.5 完整示例：组合使用魔法注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 一个路由级懒加载的典型配置
const AdminDashboard = lazy(
  () =>
    import(
      /* webpackChunkName: "admin-dashboard" */
      /* webpackPrefetch: true */
      "./pages/AdminDashboard"
    ),
);

// 国际化包的按需加载
const loadLocale = (lang) =>
  import(
    /* webpackChunkName: "locale-[request]" */
    /* webpackMode: "lazy-once" */
    /* webpackInclude: /\/(zh|en|ja)\.json$/ */
    `./locales/${lang}.json`
  );

七、代码分割统一命名规范

7.1 JS 文件命名

bundle 拆成多个文件。为了在构建产物中一眼区分主文件和分割出来的 chunk 文件，我们需要为 JS 和 CSS 分别制定统一的命名规范。

在 output 中，filename 和 chunkFilename 分别控制入口文件和分割 chunk 的命名：

1
2
3
4
5
6
7
8
9
10

output: {
  path: path.resolve(__dirname, 'dist'),

  // 入口文件（entry 直接对应的输出）
  filename: 'js/[name].[contenthash:8].js',

  // 非入口 chunk（SplitChunksPlugin 拆的 + 动态 import 产生的）
  // 通过 .chunk 后缀与入口文件区分
  chunkFilename: 'js/[name].[contenthash:8].chunk.js'
}

构建产物对比：

1
2
3
4
5
6

dist/js/
├── app.a1b2c3d4.js              ← 入口文件（filename 控制）
├── runtime.e5f6g7h8.js          ← 运行时（filename 控制）
├── vendors.i9j0k1l2.chunk.js    ← 第三方库 chunk（chunkFilename 控制）
├── commons.m3n4o5p6.chunk.js    ← 公共模块 chunk（chunkFilename 控制）
└── about-page.q7r8s9t0.chunk.js ← 动态导入 chunk（chunkFilename 控制）

看到 .chunk.js 后缀就知道这是代码分割产生的文件，没有 .chunk 的就是入口主文件。

7.2 CSS 文件命名

使用 MiniCssExtractPlugin 提取 CSS 时，同样存在 filename 和 chunkFilename 两个配置，逻辑与 JS 完全一致：

1
2
3
4
5
6
7
8
9
10
11
12

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins: [
  new MiniCssExtractPlugin({
    // 入口 chunk 中提取的 CSS（如全局样式、主样式文件）
    filename: "css/[name].[contenthash:8].css",

    // 非入口 chunk 中提取的 CSS（如动态导入的路由页面自带的样式）
    // 同样通过 .chunk 后缀与主 CSS 区分
    chunkFilename: "css/[name].[contenthash:8].chunk.css",
  }),
];

构建产物对比：

1
2
3
4

dist/css/
├── app.a1b2c3d4.css              ← 入口样式（filename 控制）
├── about-page.e5f6g7h8.chunk.css ← 动态导入页面的样式（chunkFilename 控制）
└── dashboard.i9j0k1l2.chunk.css  ← 动态导入页面的样式（chunkFilename 控制）

为什么 CSS 也会被分割？
当你使用动态 import() 加载一个路由页面时，如果该页面组件中引用了 CSS（例如 import './About.css'），MiniCssExtractPlugin 会自动将这部分 CSS 也拆分为独立文件，与对应的 JS chunk 配对加载。所以 CSS 也需要 chunkFilename 来命名这些分割出来的样式文件。

7.3 完整命名规范汇总

核心原则：所有被代码分割拆出来的文件，统一加上 .chunk 后缀，构建产物一目了然。

八、预获取与预加载

我们前面已经做了代码分割，同时会使用 import 动态导入语法来进行代码按需加载（我们也叫懒加载，比如路由懒加载就是这样实现的）。

但是加载速度还不够好，比如：是用户点击按钮时才加载这个资源的，如果资源体积很大，那么用户会感觉到明显卡顿效果。

我们想在浏览器空闲时间，加载后续需要使用的资源。我们就需要用上 Preload 或 Prefetch 技术。

8.1 Prefetch（预获取）

含义：告诉浏览器 “这个资源将来可能会用到，在空闲时提前下载”。

1
2
3
4
5
6
7
8
9

// 当用户在首页时，浏览器会在空闲时提前下载 login-page chunk
const LoginPage = lazy(
  () =>
    import(
      /* webpackPrefetch: true */
      /* webpackChunkName: "login-page" */
      "./pages/LoginPage"
    ),
);

Webpack 会在 HTML 的 <head> 中注入：

1

<link rel="prefetch" href="login-page.xxxx.chunk.js" />

行为特点：

• 浏览器在 空闲时 下载该资源
• 下载优先级 很低，不会影响当前页面的关键资源
• 资源会被缓存，当真正需要时直接从缓存中获取

8.2 Preload（预加载）

含义：告诉浏览器 “这个资源当前页面一定会用到，请立即开始下载”。

1
2
3
4
5
6
7
8
9

// ChartComponent 是当前页面马上就要渲染的内容
const ChartComponent = lazy(
  () =>
    import(
      /* webpackPreload: true */
      /* webpackChunkName: "chart" */
      "./components/Chart"
    ),
);

Webpack 会在 HTML 的 <head> 中注入：

1

<link rel="preload" as="script" href="chart.xxxx.chunk.js" />

行为特点：

• 浏览器 立即 开始下载（与父 chunk 并行）
• 下载优先级 较高
• 如果资源在 3 秒内未被使用，控制台会发出警告

8.3 Prefetch vs Preload 对比

1
2
3
4
5
6
7
8

Prefetch 时间线：
├── 主 chunk 下载 ──┤
                     ├── 空闲... ──┤
                                    ├── prefetch chunk 下载 ──┤

Preload 时间线：
├── 主 chunk 下载 ──────────┤
├── preload chunk 下载 ──┤    ← 同时进行！

8.4 实际使用建议

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// ✅ 适合 Prefetch 的场景
// 用户很可能会访问但当前不需要的页面/功能
const Settings = lazy(
  () => import(/* webpackPrefetch: true */ "./pages/Settings"),
);
const HelpCenter = lazy(
  () => import(/* webpackPrefetch: true */ "./pages/HelpCenter"),
);

// ✅ 适合 Preload 的场景
// 当前页面立即需要，但因为是动态引入而无法被一起打包的模块
const HeroAnimation = lazy(
  () => import(/* webpackPreload: true */ "./components/HeroAnimation"),
);

// ❌ 不要滥用 Preload
// 如果 preload 了太多资源，反而会与当前页面的关键资源争抢带宽

8.5 还需要额外插件吗？（如 @vue/preload-webpack-plugin）

在 Webpack 5 中，不再建议使用 @vue/preload-webpack-plugin 或类似的第三方插件。

• 理由：Webpack 4.6.0+ 已经原生支持了 prefetch 和 preload 魔法注释。当你使用这些注释时，Webpack 会在运行时利用其内置的脚本加载机制，自动在 HTML 的 <head> 中生成并维护对应的 <link> 标签。
• 优点：直接使用魔法注释减少了配置复杂度和依赖项。除非你有“全局自动化注入所有异步 Chunk”这种极特殊的批量处理需求，否则魔法注释是目前最标准、最推荐的做法。

九、Tree Shaking 与代码分割的协同

Tree Shaking 和代码分割通常被认为是两个独立的优化方向，但在 Webpack 5 中，它们是深度耦合、互相成就的。

• 代码分割（Code Splitting）：解决 “什么时候加载” 的问题。它按文件、按路由将代码拆散。
• Tree Shaking：解决 “加载多少内容” 的问题。它从文件内部剔除没用的导出成员。

9.1 sideEffects：Tree Shaking 的“免检开关”

这是最容易产生误区的地方。sideEffects 的核心作用是告诉 Webpack：若本模块的导出未被使用，是否可以连带其内部的副作用逻辑一并“物理抹除”。

1）深入对比：设置 false vs 不设置

假设有模块 math.js：

1
2
3
4

// math.js
export const add = (a, b) => a + b;
console.log("math 模块被加载了"); // 这就是一个副作用（Side Effect）
window.mathLoaded = true; // 这也是一个副作用

[!CAUTION]
风险提示：如果你的代码依赖“只需 import 就能生效”的逻辑（如：CSS、全局变量初始化、Polyfill），必须在 package.json 中配置数组来排除它们：

1	"sideEffects": ["*.css", "./src/init-polyfill.js"]

9.2 三种导入姿势对 Tree Shaking 的影响

为了配合代码分割和 Tree Shaking 达到最佳体积，导入方式至关重要：

1
2
3
4
5
6
7
8
9
10
11

// ❌ 方案 A：全量导入（极其不推荐）
// 这种方式会导致整个 lodash 被包进来，除非 lodash 本身支持并配置了 sideEffects
import _ from "lodash";

// ✅ 方案 B：具名导入（Tree Shaking 友好）
// Webpack 会识别出你只用了 debounce，从而 shake 掉其他成员
import { debounce } from "lodash-es";

// ✅ 方案 C：子路径导入（物理级 Tree Shaking）
// 这种方式最直接，打包器只会关注 debounce.js 及其依赖，根本不看 lodash 其他部分
import debounce from "lodash/debounce";

9.3 当 Tree Shaking 遇到 SplitChunks

这是一个高级协同场景。当你配置了 optimization.splitChunks 时，Tree Shaking 的结果会直接影响公共块的提取。

协同逻辑：

1. Webpack 首先对每个入口进行 Tree Shaking 标记（哪些成员没用）。
2. 在进行 SplitChunks 公共模块提取时，Webpack 提取的是 “经过 Shake 之后的残余模块”。
3. 如果一个公共模块 utils.js 在入口 A 里用了 a()，在入口 B 里用了 b()，那么最后提取出来的 commons.chunk.js 只会包含 a 和 b 的代码。

9.4 结合动态导入与 webpackExports

这是 Webpack 5 提供的极致优化工具。如果你只想动态加载一个巨大模块中的一小部分成员：

1
2
3
4
5

// 场景：只想动态加载模块中名为 'specificExport' 的成员
const member = await import(
  /* webpackExports: ["specificExport"] */
  "large-library"
);

底层协同效果：

• Webpack 会为这个特殊的 import() 创建一个极小的 Chunk。
• 它会绕过整个 large-library 的其他导出成员，利用 Tree Shaking 标记并仅提取 specificExport 及其必要依赖。

9.5 协同优化检查表

• 项目源码：package.json 里的 sideEffects 是否已正确设置（包含排除 CSS）。
• 第三方库：是否优先使用了支持 ESM 协议的包（如 lodash-es 优于 lodash）。
• 导出模式：是否使用了 export default { ... }？（不要这样做，对象形式的默认导出不利于 Tree Shaking，请使用具名 export）。
• CSS 处理：是否使用了 MiniCssExtractPlugin？（它能配合代码分割，在 Shake 掉 JS 的同时，也由 Webpack 自动分析并 Shake 掉多余的 CSS）。

十、实战：完整的代码分割配置方案

下面是一个适用于中大型前端项目的生产级代码分割配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",

  entry: {
    app: "./src/index.js",
  },

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].[contenthash:8].js",
    chunkFilename: "js/[name].[contenthash:8].chunk.js",
    clean: true,
  },

  optimization: {
    // 提取运行时代码
    runtimeChunk: "single",

    // 模块 ID 使用确定性算法（利于长期缓存）
    moduleIds: "deterministic",

    splitChunks: {
      chunks: "all",
      minSize: 20000,
      maxSize: 250000,

      cacheGroups: {
        // 框架核心（React / Vue）—— 版本极少变动，长期缓存
        framework: {
          test: /[\\/]node_modules[\\/](react|react-dom|vue|vue-router|pinia)[\\/]/,
          name: "framework",
          chunks: "all",
          priority: 40,
          enforce: true,
        },

        // UI 组件库 —— 体积大，单独分离
        ui: {
          test: /[\\/]node_modules[\\/](antd|@ant-design|element-plus|@element-plus)[\\/]/,
          name: "ui-lib",
          chunks: "all",
          priority: 30,
        },

        // 工具库（lodash、dayjs、axios 等）—— 使用频率高
        utils: {
          test: /[\\/]node_modules[\\/](lodash|lodash-es|dayjs|axios|qs)[\\/]/,
          name: "utils",
          chunks: "all",
          priority: 25,
        },

        // 其他第三方库
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
          priority: 10,
        },

        // 项目中被多处引用的公共模块
        commons: {
          name: "commons",
          minChunks: 2,
          chunks: "all",
          priority: 5,
          reuseExistingChunk: true,
        },
      },
    },

    minimize: true,
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    }),
  ],
};

产出文件结构预览：

1
2
3
4
5
6
7
8
9
10
11
12
13

dist/
├── index.html
└── js/
    ├── runtime.a1b2c3d4.js          ← Webpack 运行时（~2KB）
    ├── framework.e5f6g7h8.js        ← React/Vue 核心（~40KB gzip）
    ├── ui-lib.i9j0k1l2.chunk.js     ← UI 组件库（按需加载）
    ├── utils.m3n4o5p6.chunk.js      ← 工具库（~15KB gzip）
    ├── vendors.q7r8s9t0.chunk.js    ← 其他第三方（~30KB gzip）
    ├── commons.u1v2w3x4.chunk.js    ← 公共模块
    ├── app.y5z6a7b8.js              ← 入口主逻辑
    ├── home-page.c9d0e1f2.chunk.js  ← 首页（动态导入）
    ├── about-page.g3h4i5j6.chunk.js ← 关于页（动态导入）
    └── ...

十一、分析与优化

11.1 使用 webpack-bundle-analyzer

安装并配置 webpack-bundle-analyzer，可以直观地看到每个 chunk 的组成和体积：

1

npm install --save-dev webpack-bundle-analyzer

1
2
3
4
5
6
7
8
9
10
11
12

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = {
  plugins: [
    // 只在需要分析时开启
    new BundleAnalyzerPlugin({
      analyzerMode: "static", // 生成静态 HTML 报告
      reportFilename: "report.html",
      openAnalyzer: false, // 不自动打开浏览器
    }),
  ],
};

通过分析报告，你可以发现：

• 哪些包体积过大，需要找替代方案或按需导入
• 哪些包被重复打包到了多个 chunk 中
• 哪些不必要的代码被打包进来了

11.2 使用 stats.json 进行离线分析

1
2

# 生成 stats.json
npx webpack --profile --json > stats.json

将 stats.json 上传到以下在线工具进行分析：

• Webpack Analyse
• Webpack Visualizer

11.3 实用的优化检查清单

在完成代码分割配置后，建议逐项检查以下内容：

• chunks 是否设为 'all'：确保同步和异步模块都能被优化
• 框架核心是否单独分包：React/Vue 版本稳定，应该有独立的长期缓存
• 大型第三方库是否按需导入：如 antd、lodash、echarts 不应全量引入
• 路由是否使用了懒加载：除首页外的所有路由页面都应该动态 import()
• contenthash 是否被使用：文件名使用 [contenthash] 以实现浏览器长期缓存
• runtimeChunk 是否被提取：避免运行时代码嵌入到业务 chunk 中
• 是否配置了 moduleIds: ‘deterministic’：保证未变更模块的 hash 稳定
• prefetch 是否用在了下一步操作：如登录后的首页可以 prefetch
• 是否运行过 bundle analyzer：确认没有意外的大包或重复包