Angular 9 - 即使在与 lodash-es 一起使用后,lodash 也会导入到产品包中
Angular 9 - lodash is imported in prod bundle even after using with lodash-es
这是我的第一个问题。我希望我能说清楚!
我正在开发一个 Angular 应用程序,版本 9.1.13.
在使用 webpack-bundle-analyzer
对我当前的产品包进行一些分析后,我发现 lodash 已完全加载到包中。所以我按照给出的解释 驱逐了 lodash 并改用 lodash-es。
我现在可以在产品包中看到 lodash-es,但 lodash 仍然存在。这是结果:
new-bundle
我在 npm list --prod lodash
中使用 lodash 寻找其他一些依赖项:我找到了一个 (@angular/localize),根据这个 link[=18,它不应该对此负责=]
└─┬ @angular/localize@9.1.13
└─┬ @babel/core@7.8.3
├─┬ @babel/traverse@7.12.13
│ └── lodash@4.17.20 deduped
├─┬ @babel/types@7.12.13
│ └── lodash@4.17.20 deduped
└── lodash@4.17.20
我不知道如何解决这个问题。你遇到过这个问题吗?
P.S.: 下面是我的构建配置
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/co-investir-frontend/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/assets",
"src/sitemap.xml",
"src/robots.txt"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"index": {
"input": "src/index.prod.html",
"output": "index.html"
},
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "20kb",
"maximumError": "30kb"
}
]
}
}
},
非常感谢您的帮助!
我最终发现一个外部库在其对等依赖项中提到了 lodash,这导致 npm list --prod lodash
没有 return 它的名字。
我能找到它的唯一方法是使用 ngx-build-plus
并在 Angular CLI 使用的配置之上编写一个小的额外 webpack 配置。
// extra-webpack.config.yts
const webpack = require('webpack');
module.exports = {
externals: {
moment: 'moment'
}
};
服务应用程序确实显示来自此库的错误要求 lodash
!
解决方案是要求图书馆的所有者使用 lodash-es
而不是他所做的 lodash
。
现在一切正常,lodash
不再包含在捆绑包中!
这是我的第一个问题。我希望我能说清楚! 我正在开发一个 Angular 应用程序,版本 9.1.13.
在使用 webpack-bundle-analyzer
对我当前的产品包进行一些分析后,我发现 lodash 已完全加载到包中。所以我按照给出的解释
我现在可以在产品包中看到 lodash-es,但 lodash 仍然存在。这是结果: new-bundle
我在 npm list --prod lodash
中使用 lodash 寻找其他一些依赖项:我找到了一个 (@angular/localize),根据这个 link[=18,它不应该对此负责=]
└─┬ @angular/localize@9.1.13
└─┬ @babel/core@7.8.3
├─┬ @babel/traverse@7.12.13
│ └── lodash@4.17.20 deduped
├─┬ @babel/types@7.12.13
│ └── lodash@4.17.20 deduped
└── lodash@4.17.20
我不知道如何解决这个问题。你遇到过这个问题吗?
P.S.: 下面是我的构建配置
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/co-investir-frontend/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/assets",
"src/sitemap.xml",
"src/robots.txt"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"index": {
"input": "src/index.prod.html",
"output": "index.html"
},
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "20kb",
"maximumError": "30kb"
}
]
}
}
},
非常感谢您的帮助!
我最终发现一个外部库在其对等依赖项中提到了 lodash,这导致 npm list --prod lodash
没有 return 它的名字。
我能找到它的唯一方法是使用 ngx-build-plus
并在 Angular CLI 使用的配置之上编写一个小的额外 webpack 配置。
// extra-webpack.config.yts
const webpack = require('webpack');
module.exports = {
externals: {
moment: 'moment'
}
};
服务应用程序确实显示来自此库的错误要求 lodash
!
解决方案是要求图书馆的所有者使用 lodash-es
而不是他所做的 lodash
。
现在一切正常,lodash
不再包含在捆绑包中!