Я пытаюсь использовать LodashModuleReplacementPlugin, чтобы уменьшить размер пакета. Я следовал инструкциям документации. Но похоже, что main.bundle.js по-прежнему включает /node_modules/lodash.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-Bundle-Analyzer — https://i.stack.imgur.com/KdJJY.jpg
