5

我有一个设置，其中库的 index.js（主入口点）导出库中的所有内容......所以它的设置如下：

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

（看看）

当我从该入口点导入 1 个导出的库时，看起来 Webpack 无法对输出进行树状抖动。runningwebpack -p实际上是将整个库包含在包中，尽管只导入了一个导出。运行webpack（非生产包）确实unused harmony export ....在整个文件中显示（167 次），但为什么它们没有被删除？

我有一个显示此问题的测试设置：https ://github.com/purtuga/webpack-bundle-test

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

/保罗

4

2 回答 2

2

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

  1. 从https://github.com/purtuga/common-micro-libs复制“common-micro-libs”src 文件夹。

  2. 将 mod3.js 中的代码编辑为：import { objectExtend } from "./common-micro-libs" export default mod3 = objectExtend({}, { text: "module 3" });

  3. 我在webpack本地运行，发现了 167 条“未使用的和谐”评论。

  4. 我webpack -p得到了以下结果： 在此处输入图像描述
  5. 将 mod3.js 中的代码更改为import objectExtend from "./common-micro-libs/jsutils/objectExtend.js" export default mod3 = objectExtend({}, { text: "module 3" });.
  6. 通过上述更改，我可以看到捆绑包大小的以下减少在此处输入图像描述

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

于 2018-02-17T12:34:48.600 回答
1

当您在没有转换（如 Babel）和缩小（如 UglifyJS）的情况下捆绑应用程序时，您会得到：未使用的和谐导出。

现在 Webpack 2+ 只标记未使用的代码并且不会将其导出到模块中。它提取所有内容并为缩小库留下未使用的代码。

为此，您可以将UglifyJS与 babel 一起使用。UglifyJS 还不支持 Javascript ES2015+ 的新语言特性。您将需要 Babel 将代码转换为 ES5，然后使用 UglifyJS 清理未使用的代码。

你将需要 .babelrc 文件：

我们必须告诉预设（在我们的例子中是babel-preset-env）跳过模块转译。

{
  "presets": [
    ["env", {
      "loose": true,
      "modules": false
    }]
  ]
}

和相应的 webpack 配置：

module: {
  rules: [
    { test: /\.js$/, loader: 'babel-loader' }
  ]
},

plugins: [
  new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: true
    },
    output: {
      comments: false
    },
    sourceMap: false
  })
]

或者

Babili是一个更好的选择，因为 Babili 会在编译之前删除未使用的代码。在降级到 ES5 之前发现未使用的类要容易得多。Tree-shaking 也适用于类声明，而不仅仅是函数。

你会需要：

npm install babili babili-webpack-plugin --save-dev

在您的 webpack 配置中使用以下插件，如下所示：

plugins: [
  new BabiliPlugin()
]

还有一种使用 babili 作为预设的优化方式。您可以参考他们的网站以将其用作 babel-loader 的预设。

于 2018-02-16T09:29:02.237 回答