I want to tree shake lodash
as well as my unused multiply
function from the generated bundle from webpack
I have 2 main files app.js
& math.js
It contains the following code -
import map from "lodash/map";
import { sum } from "./math";
console.log("💩");
console.log(`2 + 3 = ${sum(2, 3)}`);
map([1, 2, 3], x => {
console.log(x);
});
export const sum = (a, b) => a + b;
export const multiply = (m, n) => m * n;
const path = require("path");
const webpack = require("webpack");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const Jarvis = require("webpack-jarvis");
let plugins = [new Jarvis()];
if (process.env.NODE_ENV === "production") plugins.push(new UglifyJSPlugin());
const config = {
entry: "./app.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
}
]
},
plugins
};
module.exports = config;
My npm
script look like -
"scripts": {
"dev": "webpack --optimize-minimize --mode development",
"dev:watch": "webpack --watch --optimize-minimize --mode development",
"prod": "webpack -p --optimize-minimize --mode production",
"prod:watch": "webpack -p --watch --optimize-minimize --mode production",
"start": "npm run prod",
"clean": "rm -rf dist"
}
The complete code is available at https://github.com/deadcoder0904/webpack-treeshake
I've tried using UglifyJSPlugin but in the generated bundle it still shows my unused multiply
function from math.js
. Also, the production
bundle generated from npm run prod
remains 20kB
which is a lot & I see a lot of lodash
stuff included as well.
I found the answer
To use lodash
with tree shaking we should first install lodash-es
& then remove the lodash
dependency
Also, it should not be transpiled first, so we make our .babelrc
file as follows -
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
Notice, that setting modules
to false
makes it not transpile
And now the bundle reduces to 16.2kB & 5.79kB gzip
Some code from lodash
module will still be used because it is required to run lodash
itself, other than that multiply
function from ./math.js
isn't added in the resulting bundle
I also needed lodash-webpack-plugin for it to be working
Treeshaking works 🎉
I've made some basic repos solving the stated problem -
https://github.com/deadcoder0904/webpack-exam
https://github.com/deadcoder0904/webpack-treeshake
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With