问题描述
我尝试使用LodashModuleReplacementPlugin减小捆绑包的大小。我已遵循Documentation的指示。但似乎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
解决方法
默认情况下，插件将包含从 lodash 到有效使用插件的所有内容，
- 了解您在项目中使用的所有工具
- 然后配置插件：
new LodashModuleReplacementPlugin({
collections: true,paths: true,caching: true,flattening: true,}),可以看到完整的选项列表here