LodashModuleReplacementPlugin

Question

我正在尝试使用LodashModuleReplacementPlugin来减少包的大小。我听从了文档的指示。但是，main.bundle.js似乎仍然包含/node_node/lorash.js。

以下是相应的文件：

webpack.config.js

...
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
...

const configuration = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // https://stackoverflow.com/questions/50173228/how-to-include-node-module-for-babel-using-webpack
        // fast-xml-parser was still es6 and needed to be included in babel-loader (Unexpected token: name (match))
        exclude: /node_modules\/((?!(fast-xml-parser)\/|(react-toastr)|(table)|(webpack-bundle-anaylzer)\/)).*/,
        use: [
          {
            loader: "babel-loader",
            options: {
              'plugins': ['lodash'],
            }
          }
        ]
      },
...
plugins: [
    new LodashModuleReplacementPlugin,
...
]}

package.json

 "dependencies": {
    "@stripe/react-stripe-js": "^1.1.2",
    "@stripe/stripe-js": "^1.9.0",
    "add": "^2.0.6",
    "autoprefixer": "^7.2.6",
    "babel-plugin-transform-function-bind": "^6.22.0",
    "babel-preset-latest": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "babel-runtime": "^6.9.2",
    "body-parser": "^1.19.0",
    "bootstrap-sass": "^3.3.7",
    "braintree-web": "3.5.0",
    "clean-webpack-plugin": "^0.1.19",
    "compressorjs": "1.0.6",
    "connect-redis": "^3.3.3",
    "css-loader": "^4.2.2",
    "es6-promise-pool": "^2.4.4",
    "express": "^4.16.2",
    "express-device": "^0.4.2",
    "express-session": "^1.15.6",
    "extract-css-chunks-webpack-plugin": "^4.7.5",
    "hoist-non-react-statics": "^2.5.0",
    "ie-version": "^0.1.0",
    "img-loader": "^3.0.1",
    "immer": "^6.0.9",
    "incstr": "^1.2.3",
    "json-loader": "^0.5.4",
    "localforage": "^1.5.0",
    "lodash": "^4.14.0",
    "lodash-cli": "^4.17.5",
    "moment": "2.14.1",
    "moment-timezone": "0.5.4",
    "node-polyglot": "^2.0.0",
    "node-sass": "^4.9.0",
    "nodemon": "^1.17.1",
    "npm-run-all": "^4.1.2",
    "path": "^0.12.7",
    "postcss-import": "^12.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-url": "^9.0.0",
    "prompt": "^1.0.0",
    "prop-types": "^15.6.0",
    "raw-loader": "^3.1.0",
    "react": "^16.0.0",
    "react-bootstrap": "1.0.0-beta.3",
    "react-click-outside": "^2.1.0",
    "react-day-picker": "7.4.0",
    "react-dom": "^16.0.0",
    "react-ga": "^2.5.5-0",
    "react-helmet": "^5.2.0",
    "react-hot-loader": "^3.1.3",
    "react-image-gallery": "^0.8.7",
    "react-inlinesvg": "^0.7.5",
    "react-input-range": "^0.9.3",
    "react-modal": "^1.6.5",
    "react-overlays": "^1.1.1",
    "react-redux": "^5.1.1",
    "react-render": "^1.1.0",
    "react-router": "4.3.1",
    "react-router-bootstrap": "^0.19.3",
    "react-router-config": "^1.0.0-beta.4",
    "react-router-dom": "4.3.1",
    "react-slick": "^0.23.1",
    "react-toastr": "2.9.5",
    "react-waypoint": "^8.0.0",
    "redis": "^2.8.0",
    "redux": "^3.7.2",
    "redux-thunk": "^1.0.2",
    "resolve-url-loader": "^2.3.2",
    "sass-loader": "^6.0.2",
    "serialize-javascript": "^1.4.0",
    "skygear": "1.4.0",
    "slick-carousel": "^1.6.0",
    "store": "^1.3.17",
    "stripe": "^8.89.0",
    "style-loader": "^1.2.1",
    "superagent": "^1.6.1",
    "sync-exec": "^0.6.2",
    "toastr": "^2.1.4",
    "transform-class-properties": "^0.1.0",
    "uglifyjs-webpack-plugin": "^1.2.3",
    "universal-cookie": "^2.1.2",
    "webpack-cli": "^3.3.12",
    "webpack-merge": "^4.1.2",
    "webpack-node-externals": "^1.6.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.11.0",
    "babel-cli": "^6.14.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^7.1.5",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "cookie-storage": "^1.0.4",
    "eslint": "^3.10.0",
    "eslint-plugin-react": "^5.2.2",
    "expect": "^1.20.2",
    "file-loader": "^1.1.11",
    "localStorage": "^1.0.3",
    "lodash-webpack-plugin": "^0.11.5",
    "mocha": "^2.5.3",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-bundle-analyzer": "^3.8.0",
    "webpack-dev-server": "^3.1.4",
    "webpack-hot-middleware": "^2.17.1"
  }

.babelrc

{
  "presets":
  [
    "react",
    ["latest", { modules: false }],
    "stage-2"
  ],

  "plugins":
  [
    "react-hot-loader/babel",
    "transform-function-bind",
    "lodash"
  ]
}

Webpack-束-分析器图- https://i.stack.imgur.com/KdJJY.jpg

Answer 1

默认情况下，该插件将包括从存档到有效使用插件的所有内容，

1. 了解您在项目中使用的所有工具
2. 然后配置插件：

   new LodashModuleReplacementPlugin({
        collections: true,
        paths: true,
        caching: true,
        flattening: true,
    }),

选项的完整列表可以看到这里