Webpack 4 is tree shaking away bootstrap, how can I prevent that?

webpack disable tree shaking
webpack tree shaking not working
webpack tree shaking node_modules
babel tree shaking
tree shaking angular
typescript tree shaking
css tree shaking
programming tree shaking

I am trying to get a legacy app that uses the Jquery modal plugin which requires bootstrap's javascript to work within an Angular 6 and Webpack 4 project that uses a custom Webpack configuration. Everything is working except that the tree shaking that takes place during bundling is removing the bootstrap imports that are in my vendor.ts file because no where in my app do I explicitly use the bootstrap import.

This then causes my bootstrap modals and bootstrap dropdowns to break.

Note: if I add something like:

import * as bootstrap from "bootstrap";
console.log(bootstrap);

to my main.ts file, webpack doesn't remove bootstrap and everything works fine.

I have already tried adding multiple entries to my package.json sideEffects property that has been suggested in the documentation but I am thinking that this property is used to mark code that should be removed. Is there a way to mark imported modules as not to be removed from the tree shaking process?

I have also tried the ProvidePlugin like so:

new ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    _: "underscore",
    bootstrap: "bootstrap",
    moment: "moment",
    momenttimezone: "moment-timezone",
    // Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
    // Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
})

Thanks for your time.

I had the same problem and solution was following:

instead of using "import", use "require".

Change this

import * as bootstrap from "bootstrap";

to this

require("bootstrap");

Unfortunately, I have not figured out, how to make it work with the "import".

How to Fully Optimize Webpack 4 Tree Shaking, identify any code it thinks isn't being used and mark it during the initial bundling step. Intro. A few months back I was tasked with upgrading my team’s React build configuration to Webpack 4. One of our main goals was to take advantage of tree-shaking, where Webpack strips out code

After doing some more digging into this issue, I was getting similar issues with other imports, the root problem was that I was referencing third party libraries in more then one place.

In other words, I was importing JQuery, bootstrap, and other libraries in my main.ts, my vendor.ts, and in my ProvidePlugin. Once the app was bundled the different references were conflicting with each other and this caused problems in my application.

I started by cleaning up all of the references and having them all live in once place, the ProvidePlugin. I then also added the runtimeChunk to my webpack configuration.

optimization: {
    runtimeChunk: "single"
}

This ensures that all of the code is referencing the same libraries. Checkout the documentation here. I'm going to leave the answer as accepted for @hostar because he did solve my initial problem though.

What is tree shaking and how does it work?, How Webpack detect the dead code that can help in tree shaking? The name and concept have been popularized by the ES2015 module bundler rollup. The webpack 2 release came with built-in support for ES2015 modules (alias harmony modules) as well as unused module export detection. The new webpack 4 release expands on this capability with a way to provide hints to the compiler via

Try webpack.ProvidePlugin in your webpack config:

Automatically load modules instead of having to import or require them everywhere.

Example:

// In webpack config
...
plugins: [
  new webpack.ProvidePlugin({
    bootstrap: 'bootstrap'
  })
]
...

More info about "shimming" in the documentation.

What is tree shaking? - Alex Bachuk, I had the same problem and solution was following: instead of using "import", use "require". Change this import * as bootstrap from "bootstrap";. This process of removing unused imports is known as tree-shaking, and is something you get for free with Webpack.

Tree Shakeable Providers and Services in Angular, Code Splitting · Entry Points · Prevent Duplication Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on Note that we did not import the square method from the src/math.js module. This doesn't mean that terser is not doing its job well because it can't figure it out. It's just  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 t

Webpack 4 is tree shaking away bootstrap, how can I prevent that?, Now, the benefits of tree shaking will vary depending on your codebase. Keep in mind that there will be cases where Webpack will see something as out, but it means the default behavior of Webpack is, in fact, to not tree shake anything. In addition, Lodash-es, react-bootstrap, and other libraries can be helped by the  The answer is in the manifest that webpack keeps to track how all the modules map to the output bundles. If you're interested in managing webpack's output in other ways, the manifest would be a good place to start. The manifest data can be extracted into a json file for easy consumption using the WebpackManifestPlugin.

Tree Shaking, The simplest way to use Bootstrap 4 is to add the whole thing from Next, update your webpack.config.js to resolve the /node_modules folder. class="d-​block w-100" data-src="holder.js/800x400?auto=yes& It is much simpler to pull in the full Bootstrap library, but if you need to squeeze out a little  The output shown from running webpack in the guides may differ slightly from the output of newer versions. This is to be expected. As long as the bundles look similar and run correctly, then there shouldn't be any issues. If you do come across an example that seems to be broken by a new version, please create an issue and we will do our best to

Comments
  • Checkout my answer below to see how to get it to work with imports.
  • I think this is actually webpack tree shaking this out, have the same problem with a similar scenario.
  • It's interesting though, I just read a comment from one of the core members of webpack that said you shouldn't use the runtimeChunk unless you need to. See this comment. Once I have my angularJS app completely converted to Angular we should be able to remove all these third party libraries so ideally this is a short-term fix.
  • Good find @justin ! Referencing same library from few places should not be a problem, webpack is clever enough to find out it is the same thing. Using optimization.splitChunks webpack will include this library just once and create needed references in modules. I think this might be bug in webpack, because using "runtimeChunk" seems overly complicated.
  • I have tried this as well, and have even tried to provide specific bootstrap module as suggested in this article.