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

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) (opens new window)

Author

回答者: hwb2017(opens new window) (opens new window)

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

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