# 对于已经 import 但未实际使用的模块使用 webpack 还会对它打包吗？
Issue
欢迎在 Gtihub Issue 中回答此问题: Issue 204 (opens new window)
Author
如果开启了 tree shaking 应该不会打包。
Author
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
模块/文件级别的 tree shaking，如果模块没有导入但是模块内的函数存在副作用(对外部变量进行读写)的话，也会被打包。解决方法是在模块所在的 npm 包的 package.json 中增加 sideEffects: false, 表示所有的模块/文件都是没有副作用的，或者有副作用的话被删了也没关系
参考 https://webpack.js.org/guides/tree-shaking/