Javascript angular 5构建生成以MB为单位的main.bundle，这会在生产中产生性能问题

我在我的项目中使用angular 5和webpack 3.10。当我尝试构建应用程序时，构建的主捆绑包文件约为2.8 MB，这会在生产中产生性能问题。我使用“npm运行构建：prod--aot--buildoptimizer”来构建应用程序。我阅读了其他关于堆栈溢出的文章来找出解决方案，并意识到我正在进行的构建不包含供应商文件。我试着用各种文章所建议的不同方法，但都是徒劳的。请帮忙。作为参考，我正在上传我的webpack.config.js、webpack.common.js、webpack.prod.js、main.browser.ts、polyfills.ts

webpack.config.js
开关（进程环境节点环境）{
案例“prod”：
“生产”案例：
module.exports=require（'./config/webpack.prod'）（{env:'production'}）；
打破
案例“测试”：
案例“测试”：
module.exports=require（'./config/webpack.test'）（{env:'test'}）；
打破
案例“dev”：
“发展”案例：
违约：
module.exports=require（'./config/webpack.dev'）（{env:'development'}）；
}

main.bundle.js的大小可以通过延迟加载来减少，延迟加载会创建可按需加载的模块

例如：

import { Routes, RouterModule } from "@angular/router";
import { ModuleWithProviders } from "@angular/core";



import { AuthenticateService } from '../authenticate/authenticate.module';
import { FacilitiesComponent } from './components/facilities.component';


const projectsRoutes: Routes = [

    {
        path: '',
        component: FacilitiesComponent,
        canActivate: [AuthenticateService],
        canActivateChild: [AuthenticateService],
        children: [
            {
                path: 'projectlist',
                loadChildren: './projects-list/projects-list.module#ProjectsListModule'
            },
            {
                path: 'project/:pid/docmng/:fid',
                loadChildren: '../facilities/project-document/project.module#ProjectModule'
            }
        ]
    }
];



export const FacilitiesRouting: ModuleWithProviders = RouterModule.forChild(projectsRoutes);


$ npm run build

> skysite-platform-client2@0.0.0 build E:\SkySite-new\skysite-platform-client
> ng build --prod

Date: 2018-05-17T12:40:26.949Z
Hash: 0b89e566c023ac3d2fb5
Time: 156588ms
chunk {8} 8.3421be99f16d735369c2.chunk.js () 1.67 kB  [rendered]
chunk {scripts} scripts.b23d003bdba35060d12d.bundle.js (scripts) 503 kB [initial] [rendered]
chunk {0} 0.e85cc76f90b3ae5b88a6.chunk.js (common) 123 kB  [rendered]
chunk {1} 1.31677c41f09d5a650d83.chunk.js () 2.47 MB  [rendered]
chunk {2} 2.52380e8925d7e658149e.chunk.js () 89.9 kB  [rendered]
chunk {3} 3.92474b63b4fbb521a866.chunk.js () 82.5 kB  [rendered]
chunk {4} 4.0faac9190c7b1e36d1e6.chunk.js () 151 kB  [rendered]
chunk {5} 5.f3296c5e15119655f3ce.chunk.js () 1.77 kB  [rendered]
chunk {6} 6.eb8af258a302bd9d066e.chunk.js () 131 kB  [rendered]
chunk {7} 7.0521fe6f5f3714081264.chunk.js () 115 kB  [rendered]
chunk {9} 9.92a24c750caada0e26c2.chunk.js () 9.35 kB  [rendered]
chunk {10} 10.3dd571f08fa3895c8730.chunk.js () 49 kB  [rendered]
chunk {11} polyfills.165ea84e5245184acc68.bundle.js (polyfills) 98.2 kB [initial] [rendered]
chunk {12} main.b02e6fabeb708e73d01f.bundle.js (main) 500 kB [initial] [rendered]
chunk {13} styles.cdbcc00089657e555f43.bundle.css (styles) 222 kB [initial] [rendered]
chunk {14} inline.3153333f01d40d57ce09.bundle.js (inline) 1.65 kB [entry] [rendered]

---

您可以在一个大模块中声明组件/指令/模块，而不是单独声明。

在我们的项目中，由于历史背景，我们有这个问题。然后，我们的主块包括一些其他模块，它们应该在单独的块中。这是因为结构不好

---

当然，正如Phani Kumar提到的，延迟加载模块是您的朋友。

我看到package.json的脚本是aot-“npm run build:aot:prod”。这将在编译代码时启用aot。您正在运行的命令可能未在应用程序中启用aot。 另外，只要确保AOT正常工作，您就需要将所有私有变量和方法移到公共位置，并检查html中是否有死代码（如果它抛出错误）。

---

希望这能起作用。

看看实际的问题是什么？问题是当我在prod模式下编译应用程序时，生成的主包太大了。在部署时，它会带来性能问题。资源以大约1000毫秒的速度加载，但在接下来的6000-7000毫秒内，浏览器会一直显示加载标志，只有在应用程序呈现之后。我已经在使用aot和预加载。但是这个周转时间是8秒。应用程序没有使用angular cli。所以，我对这项工作没有多大希望