Help on Tree Shaking using Webpack 4


Hello there,

I’m making a Vuejs template from scratch using Webpack 4 and I have 3 separate config files common, dev, prod, I’m also follow an example from webpack tree shaking guide. In my src folder I have the current configuration:

src /

math.js - This example is provide by webpack tree shaking guide

export function square(x) {
   return x * x;

export function cube(x) {
    return x * x * x;

App.vue - Importing square fn only from math.js


import { square } from "./math";
export default {
  data() {
    return {
      test: square(2)

When in development both functions square, cube get imported in the bundle which is normal but when building for production the cube function still get imported, I also use the sideEffects property set to false with no success.

The cube function should not be included in the bundle and here she is:

Not sure what I’m doing wrong, probably it has to do with some Vue configuration?

I’ll appreciate the help, thanks.


I’m also wondering what the solution to this is.