Webpack Magic Comment 常用于动态导入 JS 时，避开 Tree Shaking 优化

什么是 Webpack Magic Comment

Webpack Magic Comment 是一种特殊的注释，用于告诉 Webpack 不要对某些模块进行 Tree Shaking 优化。它可以用于动态导入 JavaScript 模块时，避免 Webpack 将这些模块优化掉。

在 Webpack 中，Tree Shaking 是一种优化技术，它可以检测和删除不需要的代码，以减小最终打包文件的大小。但是，在某些情况下，Tree Shaking 可能会将我们真正需要的代码误删。这时，我们可以使用 Webpack Magic Comment 来阻止 Tree Shaking 对这些代码进行优化。

如何使用 Webpack Magic Comment

Webpack Magic Comment 的使用非常简单，只需要在动态导入的模块后面添加一行注释即可。注释的格式如下：

import(/* webpackChunkName: "MyChunkName" */ './MyModule.js')

其中，webpackChunkName 是 Webpack Magic Comment 的关键字，后面的字符串是我们为这个模块取的名字。这个名字将用于生成最终的打包文件名。

Webpack Magic Comment 的指导意义

使用 Webpack Magic Comment 可以帮助我们解决一些实际问题。

避免 Tree Shaking 误删代码

在某些情况下，Tree Shaking 可能会将我们真正需要的代码误删。例如，如果我们在某个模块中使用了一个动态生成的对象属性，而这个属性的名称无法在编译时确定，那么 Tree Shaking 就无法识别它，从而将这个属性优化掉。这时，我们可以使用 Webpack Magic Comment 来阻止 Tree Shaking 对这个模块进行优化。

例如，下面的代码中，我们使用了一个动态生成的对象属性 obj[key]，其中 key 是在运行时才能确定的。如果我们不使用 Webpack Magic Comment，那么 Tree Shaking 就会将这个属性优化掉。

const obj = { foo: 'bar' }
const key = Math.random() > 0.5 ? 'foo' : 'baz'
console.log(obj[key])

如果我们想要保留这个属性，可以使用 Webpack Magic Comment：

import(/* webpackChunkName: "MyChunkName" */ './MyModule.js')

减小打包文件的大小

使用 Webpack Magic Comment 可以帮助我们减小打包文件的大小。当我们使用动态导入模块时，如果没有使用 Webpack Magic Comment，Webpack 会将这些模块全部打包到一个文件中。这样，即使我们只需要其中的一部分模块，也会将整个文件都加载进来，从而造成不必要的网络流量和加载时间。

如果我们使用 Webpack Magic Comment，可以将这些模块分别打包到不同的文件中，从而只加载需要的模块，减小打包文件的大小。

例如，下面的代码中，我们使用了动态导入模块。如果我们不使用 Webpack Magic Comment，Webpack 会将这些模块全部打包到一个文件中。

import('./MyModule1.js')
import('./MyModule2.js')
import('./MyModule3.js')

如果我们想要将这些模块分别打包到不同的文件中，可以使用 Webpack Magic Comment：

import(/* webpackChunkName: "MyModule1" */ './MyModule1.js')
import(/* webpackChunkName: "MyModule2" */ './MyModule2.js')
import(/* webpackChunkName: "MyModule3" */ './MyModule3.js')

示例代码

下面是一个使用 Webpack Magic Comment 的示例代码：

// index.js
import(/* webpackChunkName: "MyModule" */ './MyModule.js').then((MyModule) => {
  console.log(MyModule.foo)
})

// MyModule.js
export const foo = 'bar'
export const baz = 'qux'

在这个示例代码中，我们使用了 Webpack Magic Comment 将 MyModule.js 打包到一个名为 MyModule.js 的文件中。当我们运行 index.js 时，只会加载 MyModule.js 中的 foo 属性，而不会加载 baz 属性。这样，我们就可以避免不必要的网络流量和加载时间，同时保留了我们真正需要的代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3da1da941bf7134747e2a