Question

我已经按照那里的所有指南打开了webpack 4中的树状摇动，但是webpack仍然捆绑了我设置为树状摇动的NPM模块中的代码。如何启用树状交换功能，并且不在我的Web应用程序中包含特定代码？

我有一个CRA（create-react-app），它会导入我创建的NPM模块以对其进行测试，如下所示：

package
  index.mjs
  dist
    esm
      components
        image
          index.js
        index.js
      index.js

与package.json像这样：

  "main": "index",
  "module": "index.jsm",
  "sideEffects": false,

使用babel和babelrc进行转译，例如：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    "@babel/react",
    "@babel/flow"
  ]
}

我有3个React组件：image，avatar（导入image）和login-button，具有以下es6代码：

import React from 'react'

document.body.innerHTML = document.body.innerHTML + "<div>This is a side effect and should never have happened</div>"

export default () => <button>Login</button>

NPM es6模块的索引文件：

import * as lib from './dist/esm'

export default lib

在CRA的app.js中，我有：

import TreeshakingTestModule from 'treeshaking-test-module'

function App() {
  return (
    <div className="App">
      <TreeshakingTestModule.Avatar />
    </div>
  );
}

当我npm start生成并呈现化身时，我也看到了消息。

请注意，login-button从未使用过，但是导入了导出组件的我的NPM软件包的默认导出，但是我阅读了一些说明，即使默认导出和重新导出也可以通过摇晃树来工作。永远不会使用导出的内容。

发生了什么事？我在做什么错了？

Full source code in GitHub repo

Answer 1

据我所知，webpack通过静态分析导入（而不是通过阅读代码）而三度动摇。您不能期望webpack意识到您仅使用Avatar中的TreeshakingTestModule。

因此，您需要使用命名的导入和导出声明要在import级别使用的内容：

import {Avatar} from 'treeshaking-test-module'

function App() {
  return (
    <div className="App">
      <Avatar />
    </div>
  );
}

因此webpack知道您仅使用Avatar导出。

这意味着Avatar必须是treeshaking-test-module模块中的命名导出。

如何使Webpack树状摇动我的ES6模块？

1 个答案: