无法在Webpack，TypeScript项目中摇晃lodash

Question

我的目标是在我的lodash树摇webpack.prod.js（以及其他）。这是我的配置文件。为了完整起见，我还将包括webpack.dev.js，webpack.common.js，tsconfig.json和package.json：

webpack.common.js：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif|obj)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.glsl$/,
                loader: 'webpack-glsl-loader'
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                enforce: 'pre',
                loader: 'tslint-loader',
                options: { failOnHint: true }
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    entry: {
        app: './src/index.ts'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Production'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

webpack.dev.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const JarvisPlugin = require("webpack-jarvis");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif|obj)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.glsl$/,
                loader: 'webpack-glsl-loader'
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                enforce: 'pre',
                loader: 'tslint-loader',
                options: { failOnHint: true }
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    entry: {
        app: './src/index.ts'
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({ title: 'urknall-core dev' }),
        new BundleAnalyzerPlugin({ analyzerPort: 8888 }),
        new JarvisPlugin({ port: 1337 }),
    ],
    output: {
        filename: '[name].bundle.js',
        publicPath: '/'
    }
};

webpack.prod.js：

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'source-map',
    plugins: [
        new UglifyJSPlugin({
            sourceMap: true,
            test: /\.js($|\?)/i,
            uglifyOptions: {
                compress: true
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
    ]
});

tsconfig.json：

{
  "compilerOptions": {
    "outDir": "./dist/",
    "declaration": true,
    "declarationDir": "./types",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
  }
}

package.json：

{
  "name": "bla",
  "version": "0.0.1",
  "description": "",
  "main": "index.ts",
  "types": "./dist/types/",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "watch": "webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/gl-matrix": "^2.4.0",
    "@types/lodash": "^4.14.104",
    "@types/node": "^8.9.4",
    "@types/webgl2": "^0.0.2",
    "@types/webpack-dev-middleware": "^1.12.3",
    "clean-webpack-plugin": "^0.1.18",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "image-webpack-loader": "^3.6.0",
    "style-loader": "^0.18.2",
    "ts-loader": "^2.3.7",
    "ts-node": "^3.3.0",
    "tslint": "^5.9.1",
    "tslint-loader": "^3.5.3",
    "typescript": "^2.7.1",
    "uglifyjs-webpack-plugin": "^1.2.2",
    "webpack": "^3.11.0",
    "webpack-bundle-analyzer": "^2.11.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-dev-server": "^2.11.2",
    "webpack-glsl-loader": "^1.0.1",
    "webpack-jarvis": "^0.3.0",
    "webpack-merge": "^4.1.2"
  },
  "dependencies": {
    "gl-matrix": "^2.4.0",
    "lodash-es": "^4.17.5"
  }
}

使用此配置，app.bundle.js将生成507 KB的文件，app.bundle.js.map为1.6 MB。如果我没有uglify构建输出，我可以看到整个lodash库被写入文件。我也看到了一些其他功能，即gl-matrix被写入文件，虽然我甚至没有使用它们。

我也在开发中运行webpack-bundle-analyzer，输出与生产没有区别。由于缩小，只有budle文件是~1.4 MB而不是1.6 MB。

我在整个项目中仅加载lodash两次，例如：

import { some, find, cloneDeep } from 'lodash';

不再使用lodash功能。为什么Webpack膨胀我的app.bundle.js？

我的配置有问题吗？

Answer 1

鉴于标准lodash包的现有出口风格，您有两种方法可以解决这个问题：

1. 转到使用导出的lodash包，其方式将直接插入导入模式。正如@ alex-rokabilis在评论中提到的，一个可用的包是lodash-es
2. 更新导入以使用标准lodash包使用的导出。如果你看一下lodash's npm page，你可以看到它们提供了从路径中采摘樱桃特定方法的支持。

   import some from 'lodash/fp/some';
   import find from 'lodash/fp/find';
   import cloneDeep from 'lodash/fp/cloneDeep';