Workbox中无需import仅通过常量即可实例化CacheFirst的原理是什么

问题解答 #

1. 不用import也能调用能力的原因

你调用importScripts()加载Workbox的CDN脚本后，该脚本会在当前Service Worker的全局作用域内挂载一个名为workbox的顶层对象，Workbox所有模块的能力都会作为属性挂载在这个对象下，比如路由能力在workbox.routing下、缓存策略能力在workbox.strategies下，这是Workbox CDN打包版本的内置实现，专门给不使用前端构建工具的场景提供免构建的使用方式。

2. 语法归属说明

你看到的const {CacheFirst} = workbox.strategies是ES6原生的对象解构赋值语法，不是Workbox特有的实现，它的作用等价于传统写法const CacheFirst = workbox.strategies.CacheFirst，就是从目标对象里直接取出同名属性，赋值给当前作用域下的同名常量，和PHP 7.1之后支持的数组解构、对象解构逻辑类似。

3. 实例化的关联逻辑

workbox.strategies.CacheFirst本身就是Workbox对外暴露的缓存策略类，你通过解构赋值把它赋值给当前作用域的CacheFirst常量之后，这个常量存储的就是该类的引用，和你通过ES Module的import语法导入的CacheFirst是完全相同的类，所以可以直接使用new CacheFirst()的方式实例化使用。

两种引入方式的本质区别只是获取类引用的路径不同：

• 使用import语句的场景：依赖npm安装的Workbox包，配合前端构建工具做模块化打包，从对应的ES模块中导出类引用
• 使用全局workbox对象的场景：直接加载预打包的CDN脚本，从全局挂载的对象中获取类引用

内容的提问来源于stack exchange，提问作者Toni