如何使用Webpack 2从Marionette 3应用程序中排除未使用的lodash部分

Question

我有一个带有下一个依赖项的虚拟应用

library(ggplot2)
ggplot() +
  geom_count(aes(length, Presence), MyData) +
  geom_line(aes(length, fit), fit, size = 1, col = 'red') +
  geom_ribbon(aes(length, ymin = lower, ymax = upper), fit, alpha = 0.15) +
  scale_size_area()

带有类似

的webpack.config.js

"dependencies": {
  "backbone": "^1.3.3",
  "backbone.marionette": "^3.1.0",
  "jquery": "^3.1.1",
  "lodash": "^4.17.4"
},
"devDependencies": {
  "babel-core": "^6.22.1",
  "babel-loader": "^6.2.10",
  "babel-preset-env": "^1.1.8",
  "webpack": "^2.2"
}

当我运行webpack时，我在捆绑包中获得了整个lodash lib。这是巨大的，比其他一切组合更大。据我所知，Marionette是{ entry: { app: './empty-file.js', vendor: ['backbone.marionette'] }, module: { rules: [ { test: /\.(js)$/, use: 'babel-loader' } ] }, resolve: { extensions: ['.js'], alias: { underscore: 'lodash' } }, plugins: [ new webpack.optimize.CommonsChunkPlugin('vendor') ], 之类的东西。有没有办法去除不需要的lodash部分？

Answer 1

您可以使用babel-plugin-lodash删除不需要的部分。

<强>之前

import _ from 'lodash';
import { add } from 'lodash/fp';

const addOne = add(1);
_.map([1, 2, 3], addOne);

<强>后

import _add from 'lodash/fp/add';
import _map from 'lodash/map';

const addOne = _add(1);
_map([1, 2, 3], addOne);