question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unused classes in export remain in bundle even after tree-shaking

See original GitHub issue

I’m submitting a bug report

Webpack version: 2.1.0-beta.21

Please tell us about your environment: Linux

Current behavior:

I have a class named Car in the file car.ts and two other classes for the engines in another file engine.ts. car.ts

import { V8Engine, Engine } from './engine';

class SportsCar {
  constructor(private engine: Engine) {}

  toString() {
    return this.engine.toString() + ' Sports Car';
  }
}

engine.ts

export interface Engine {
  toString(): string;
}

export class V6Engine implements Engine {
  toString() {
    return 'V6';
  }
}

export class V8Engine implements Engine {
  toString() {
    return 'V8';
  }
}

export function getVersion() {
  return '1.0';
}

console.log(new SportsCar(new V8Engine()).toString());

The car.ts file only imports the V8Engine class, but the V6Engine class also appears even in the minified file. The unused function i export from engine.ts is stripped.

When running Webpack without UglifyJS plugin, the V6Engine class is marked with /* unused harmony export V6Engine */ as expected. But after adding the plugin i get this warning message from UglifyJS:

    WARNING in car.prod.bundle.js from UglifyJs
    Dropping unused function getVersion [car.prod.bundle.js:89,9]
    Side effects in initialization of unused variable V6Engine [car.prod.bundle.js:73,132]

I have created a repository where the problem can be reproduced. Cloning, installing and running npm run webpack and npm run webpack-prod reproduces the issue.

Don’t know if this is a bug with the Typescript transpilation, UglifyJS or the orchestration of these tools. I’m using Typescript with es2015 modules and Webpack 2.

Expected/desired behavior:

The unused class should be removed in the minified file.

  • What is the motivation / use case for changing the behavior?
  • Browser: all
  • Language: TypeScript 2.0-dev

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:31
  • Comments:37 (13 by maintainers)

github_iconTop GitHub Comments

87reactions
lbialycommented, Dec 26, 2016

Any updates on this guys’n’gals?

12reactions
TheLarkInncommented, Aug 21, 2016

I left @mishoo a message asking if he needs any help. This is pretty important to us and there is a large Typescript/Angular2 userbase.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack including unused exports in final bundle (not tree ...
It is much easier to spot unused classes before downleveled to ES5. Tree-shaking will also work for class declarations, not just functions.
Read more >
Tree shaking and code splitting in webpack - LogRocket Blog
Here, we'll explain tree shaking and code splitting in webpack and discuss how to combine them for the most optimal bundle possible.
Read more >
How to Do Proper Tree-Shaking in Webpack 2 - Emarsys
In this tutorial I'll show you how tree-shaking works in Webpack and ... When bundling is done, there are no unused classes and...
Read more >
Tree-shaking in real world: what could go wrong? - Medium
Tree-shaking is the process of detecting and marking dead code in your bundle based on ES modules' usage of import and export statements....
Read more >
Tree Shaking - How to Clean up Your JavaScript - KeyCDN
The aim of tree shaking is to remove unused JavaScript to ensure that only ... classes are used and unused with the messages...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found