Webpack 在最终包中包含未使用的导出(不是摇树)

标签 webpack webpack-3 tree-shaking

我有一个设置,其中一个库的 index.js(主入口点)导出 lib 中的所有内容......所以它的设置是这样的:

export * from "./mod1"
export * from "./mod2"
// etc...

( take a look )

当我从该入口点导入 1 个导出的库时,看起来 Webpack 无法摇动输出。运行 webpack -p实际上将整个库包含在包中,尽管只导入了一个导出。运行 webpack (非生产捆绑)确实显示 unused harmony export ....在整个文件中(167 次),但为什么它们没有被删除?

我有一个测试设置在这里显示这个问题:https://github.com/purtuga/webpack-bundle-test

希望有人(比我更聪明:))可以帮助确定我做错了什么。

/保罗

最佳答案

我克隆了你的“webpack-bundle-test”,这就是我所做的。

  • https://github.com/purtuga/common-micro-libs 复制“common-micro-libs”src 文件夹.
  • 将 mod3.js 中的代码编辑为:import { objectExtend } from "./common-micro-libs" export default mod3 = objectExtend({}, { text: "module 3" });
  • 我跑了webpack在本地,发现了 167 条“未使用的和谐”评论。
  • webpack -p我得到了以下结果:
    enter image description here
  • 将 mod3.js 中的代码更改为 import objectExtend from "./common-micro-libs/jsutils/objectExtend.js" export default mod3 = objectExtend({}, { text: "module 3" }); .
  • 通过上述更改,我可以看到包大小的以下减小 enter image description here

  • 我相信在导入依赖项时,最好只从库中导入必要的功能/组件,这样会更有效地打包在包中。
    我无法解释为什么会这样,尽管我在使用 lodash 时在我的项目中导入实用程序时遵循相同的原则并且它工作正常。
    你能运行测试并让我知道吗?

    关于Webpack 在最终包中包含未使用的导出(不是摇树),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48599352/

    相关文章:

    javascript - Vue Webpack 配置不会缩小图像

    reactjs - "module not found : Error: Cannot resolve module ' react /lib/ReactMount ' "

    javascript - Ember 和 Dead Code 消除/Tree shake

    webpack - 摇树不起作用 - webpack 4 和 uglifyjs-webpack-plugin

    javascript - 模块构建失败 : SyntaxError: Missing class properties transform when using webpack2

    javascript - 条件环境变量摇树

    reactjs - 切换到在现有项目上创建 React 应用程序?

    node.js - 无法从 react-script 卸载 webpack

    testing - 如何使用 Webpack jsHint 两个不同的文件夹?

    electron - 错误 : DllPlugin: supply an Array as entry