我正在使用版本17构建Angular应用程序,Bundle 后,尺寸超出了预算.使用源 map 资源管理器,插图显示有多个Angular Metal模块没有闲置加载,例如form-field、CDK和list.从独立实现guidance开始,我已经配置了懒惰路由和懒惰组件,但这些Material模块仍然在初始Bundle 包中.
由于我使用NX,因此构建脚本为:
"build-ng-frontend": "nx build ng-frontend --configuration production --optimization --base-href ./",
以下是生成源 map 的脚本:
"bundle-ng-frontend-report": "nx build ng-frontend --configuration production --source-map && source-map-explorer dist/apps/ng-frontend/browser/*.js",
这是一个例子,
// app routes
export const APP_ROUTES: Route[] = [
{
path: 'topics',
loadChildren: () =>
import('./modules/help-center/routes').then((m) => m.HELP_CENTER_ROUTES),
},
{
path: 'projects/:projectSlug',
loadChildren: () =>
import('./modules/project/routes').then((m) => m.PROJECT_ROUTES),
},
{
path: '',
loadChildren: () =>
import('./modules/entry/routes').then((m) => m.ENTRY_ROUTES),
},
];
// help center routes
export const HELP_CENTER_ROUTES: Routes = [
{
path: '',
loadComponent: () =>
import('./views/help-center-view.component').then(
(m) => m.HelpCenterViewComponent
),
children: [
{
path: ':name',
loadComponent: () =>
import('./components/main-content/main-content.component').then(
(m) => m.MainContentComponent
),
},
],
},
];
是否不可避免地会有更大的初始Bundle 包大小,或者我误解了构建中的某些内容?如果您需要进一步调查,这是我的repo.