app.js

Question

我想从lodash

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

我有两个主要文件app.js＆amp; 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函数。此外，production生成的npm run prod捆绑包仍然是20kB，这是很多＆amp;我也看到了很多lodash内容。

Answer 1

我找到了答案

要使用lodash树摇晃，我们应先安装lodash-es＆amp;然后删除lodash依赖项

此外，它不应该首先进行转换，因此我们将.babelrc文件设置如下 -

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

请注意，将modules设置为false会使其无法转换

现在捆绑减少到 16.2kB ＆amp; 5.79kB gzip

lodash模块中的某些代码仍会被使用，因为除lodash以外的multiply函数之外，还需要运行./math.js本身在结果包中

我还需要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';来工作，那么知道如何做将是很棒的！

与Webpack 4一起使用Webpack的Lodash不是TreeShaking吗？

app.js

math.js

webpack.config.js

2 个答案: