如何在我的ES6模块中创建webpack树形图？

Question

I have followed every guide out there for turning on tree shaking in webpack 4 but webpack still bundles code from a NPM module that I have set up to be treeshaken. How can I enable treeshaking and not include particular code in my web app?

Full source code in GitHub repo

I have a CRA (create-react-app) that imports a NPM module I created to test it that looks like this:

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

with package.json like this:

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

that transpiles using babel with babelrc like:

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

I have 3 React components: image , avatar (that imports image ) and login-button that has this es6 code:

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>

The index file for the NPM es6 module:

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

export default lib

In the CRA's app.js I have:

import TreeshakingTestModule from 'treeshaking-test-module'

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

When I npm start it builds and renders the avatar but I also see the message.

Note that login-button is never used however the default export of my NPM package which does export the component is imported, however I read tutorials that explained that even default exports and re-exports should still work with tree shaking if what is exported is never used.

What is happening? What am I doing wrong?

Full source code in GitHub repo

Answer 1

As far as I know, webpack three shakes by analysing imports statically, not by reading your code. You cannot expect webpack to realize you're only using Avatar from TreeshakingTestModule .

So you need to declare what you want to use at import level, by using named imports and exports:

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

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

So webpack knows you're only using the Avatar export.

This means that Avatar needs to be a named export in your treeshaking-test-module module.