极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。

# 对于已经 import 但未实际使用的模块使用 webpack 还会对它打包吗?

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 204 (opens new window)

Author

回答者: blank121 (opens new window)

如果开启了 tree shaking 应该不会打包。

Author

回答者: varlinux (opens new window)

tree shaking 通过扫描所有 ES6 的 export,找出被 import 的内容并添加到最终代码中。tree shaking 的使用时 源码必须遵循 ES6 的模块规范 (import & export),如果是 CommonJS 规范 (require) 则无法使用。 也就是说,需要给 babel 里面配置一下"es6 不要解析":

// .babelrc

{
    "presets": [
        ["es2015", {"modules": false}]
    ]
}

tree shaking 在 webpack2.0 里面需要进行手动设置,webpack3 和 webpack4 里面为默认设置。

# 一、对于方法的处理

通过 tree shaking 设置后,webpack 里面会将没有使用的方法标记为: unused harmony export xxx,但代码仍然保留。(webpack 编译后的源码里面仍然包含没有使用的方法) 随后使用UglifyJSPlugin进行第二步,将已经标记的没有使用的方法进行删除。

# 二、对于类的处理

与标记方法不同,webpack 打包时会将整个类进行标记,也就是说,即使类里面的方法没有被使用也会进行打包编译。 这表明 webpack tree shaking 只处理顶层内容,例如类和对象内部都不会再被分别处理。 综上所述,可以得出 “对于已经 import 但未实际使用的模块使用 webpack 还会对它打包” 。 当然,想要精简代码是可以实现的,具体文章参考:Webpack 之 treeShaking (opens new window)

Author

回答者: hwb2017 (opens new window)

模块/文件级别的 tree shaking,如果模块没有导入但是模块内的函数存在副作用(对外部变量进行读写)的话,也会被打包。解决方法是在模块所在的 npm 包的 package.json 中增加 sideEffects: false, 表示所有的模块/文件都是没有副作用的,或者有副作用的话被删了也没关系

参考 https://webpack.js.org/guides/tree-shaking/

Last Updated: 11/27/2021, 6:11:48 PM