来源：JS完整实现深拷贝【循环引用，Set，Map…】_js复制map-CSDN博客

DLL

DLL（Dynamic Link Library）缓存，即动态链接库，是一种特殊的文件类型，它包含可以被多个应用程序共享使用的代码和数据段

当一个程序需要使用另一个程序提供的服务或函数时，它会请求这些服务的地址，并将其添加到自己的内部符号中，这个过程被称为动态加载

操作系统负责管理这些动态链接库文件的查找过程，确保程序能够找到所需的DLL文件，以完成启动和运行

DLLPlugin

DLLPlugin主要用于单独打包第三方依赖库，以免每次构建项目时都要重新编译这些依赖库

正常打包

main.js：

1
2
3
4
5
6
7
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createWebHashHistory } from 'vue-router'

let a = 1
// 使用一下，防止打包时被treeshaking
console.log(a, createApp, createPinia, createWebHashHistory)

webpack.config.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const { Configuration } = require('webpack')
const path = require('path')

/**
 * @type Configuration
 */
const config = {
  entry: './main.js',
  mode: 'development',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

module.exports = config

打了非常平常的一包，花费时间为752ms

DLL缓存打包

webpack.config.dll.js，用于配置DLL缓存文件：

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
const { Configuration } = require('webpack')
const path = require('path')
// webpack自带DllPlugin
const { DllPlugin } = require('webpack')

/**
 * @type Configuration
 */
const config = {
  entry: {
    // 提取依赖库
    vue: [
      'vue',
      'vue-router',
      'pinia'
    ]
  },
  mode: 'development',
  output: {
    // 将这些输出到dll文件夹
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll')
  },
  plugins: [
    new DllPlugin({
      name: '[name]',
      // 缓存文件
      path: path.resolve(__dirname, 'dll', '[name].manifest.json')
    })
  ]
}

module.exports = config

为需要缓存的包单独打包一下，得到了缓存文件

回到webpack.config.js，引入缓存文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const { Configuration } = require('webpack')
const path = require('path')
// 用于加载dll缓存文件
const { DllReferencePlugin } = require('webpack')

/**
 * @type Configuration
 */
const config = {
  entry: './main.js',
  mode: 'development',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new DllReferencePlugin({
      // 引入缓存文件
      manifest: require('./dll/vue.manifest.json')
    })
  ]
}

module.exports = config

再打个包，速度直接飙到105ms了

有需要的话，也可以给其他库做缓存，代码内容越多，效率增幅会越明显