Help on Tree Shaking using Webpack 4


#1

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 /
    App.vue
    index.js
    index.html
    math.js

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

<template>
    <h1>{{test}}</h1>
</template>

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

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.


#2

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