Lodash 不是 TreeShaking with Webpack 和 Webpack 4？

Question

我想从 webpack

生成的包中摇树 lodash 以及我未使用的 multiply 函数

我有 2 个主要文件 app.js & math.js

它包含以下代码-

app.js

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);
});

math.js

export const sum = (a, b) => a + b;
export const multiply = (m, n) => m * n;

webpack.config.js

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;

我的 npm 脚本看起来像 -

"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"
  }

完整代码可在 https://github.com/deadcoder0904/webpack-treeshake

我试过使用 UglifyJSPlugin，但在生成的包中它仍然显示我未使用的 multiply 来自 math.js 的函数。此外，从 npm run prod 生成的 production 包仍然是 20kB，这是很多而且我看到很多 lodash 东西也包含在内。

Answer 1

我找到了答案

要在 tree shaking 中使用 lodash，我们应该首先安装 lodash-es，然后删除 lodash 依赖项

另外，它不应该先被转译，所以我们.babelrc 文件如下 -

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ]
}

注意，将 modules 设置为 false 使其无法转译

现在压缩包减少到 16.2kB & 5.79kB gzip

来自 lodash 模块的部分代码仍将被使用，因为运行 lodash 本身需要它，而不是来自 ./math.js 的 multiply 函数未添加到生成的包中

我还需要 lodash-webpack-plugin 才能正常工作

Treeshaking 有效

我做了一些基本的回购协议来解决上述问题 -

https://github.com/deadcoder0904/webpack-exam

https://github.com/deadcoder0904/webpack-treeshake

Answer 2

基于@deadcoder0904 的回答，这里是如何在 webpack 4 中使用 babel-loader 做同样的事情（而不是使用 .babelrc）：

...
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    plugins: ['lodash'],
                    presets: [['env', { modules: false }]]
                }
            }
        },

注意：如果没有从 'lodash-es' 显式导入，我无法让它工作（即使我在我的 tsconfig 中将 lodash-es 指向 lodash（我正在使用打字稿）。如果有人可以无需使用特殊的 import { map } from 'lodash-es'; 而使用 import { map } from 'lodash'; 即可实现此功能，知道如何操作会很棒！

Lodash 不是 TreeShaking with Webpack 和 Webpack 4？

Lodash not TreeShaking with Webpack with Webpack 4?

javascript

uglifyjs

uglifyjs2

webpack

webpack-2

app.js

math.js

webpack.config.js