我正在学习使用Lodash的webpack 4 / React应用程序进行树状摇动。

起初，我的Lodash用法如下：

import * as _ from "lodash";
_.random(...

我很快通过BundleAnalyzerPlugin得知，Lodash的整个版本都包含在开发版和产品版（527MB）中。

googling around之后，我意识到我需要使用一种特定的语法：

import random from "lodash/random";
random(...

现在，仅random及其依赖项已正确包含在捆绑包中，但我仍然有些困惑。

如果我需要在import语句中显式指定函数，那么摇树实际上起着什么作用？ 在开发和生产模式构建之间进行比较时，BundleAnalyzerPlugin的有效负载大小没有显示差异（两者都是正确的小尺寸，但我认为摇晃仅发生在生产构建中吗？）。

给我的印象是，TreeShaking将执行某种静态代码分析，以确定实际使用的代码部分（也许基于功能？），并裁剪掉未使用的位。

为什么我们不能总是仅在*中使用import并依靠TreeShaking找出实际包含在捆绑软件中的内容？

以防万一，这里是我的webpack.config.js：

const path = require("path");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  entry: {
    app: ["babel-polyfill","./src/index.js"]
  },plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: "static",openAnalyzer: false
    })
  ],devtool: "source-map",output: {
    filename: "[name].js",path: path.resolve(__dirname,"dist"),chunkFilename: "[name].bundle.js",publicPath: ""
  },module: {
    rules: [
      {
        test: /\.js$/,loader: "babel-loader",include: /src/,options: {
          babelrc: false,presets: [
            [
              "env",{
                targets: {
                  browsers: ["last 2 Chrome versions"]
                }
              }
            ],"@babel/preset-env","@babel/preset-react"
          ],plugins: ["syntax-dynamic-import"]
        }
      },{
        test: /\.(ts|tsx)$/,use: [
          {
            loader: require.resolve("ts-loader"),options: {
              compiler: require.resolve("typescript")
            }
          }
        ]
      }
    ]
  },resolve: {
    symlinks: false,extensions: [".js",".ts",".tsx"],alias: {
      react: path.resolve("./node_modules/react")
    }
  }
};

我正在使用webpack --mode=development和webpack --mode=production调用webpack。