默认angular配置：入口文件最大7MB，DOMContentload和load分别为3.22s和3.43秒1.安装angular-buildersnpminstall@angular-builders/custom-webpack--save-devnpminstall@angular-devkit/build-angular--save-dev2。修改angular.json中build和server的配置"architect":{......"build":{"builder":"@angular-builders/custom-webpack:browser","options":{"customWebpackConfig":{"path":"./webpack.config.js"}}},"serve":{"builder":"@angular-builders/custom-webpack:dev-server","options":{"customWebpackConfig":{"path":"./webpack.config.js"}}}}3.自定义webpack.config.js配置constwebpack=require('webpack');constpkg=require('./package.json');constpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin')//constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports={optimization:{splitChunks:{chunks:'all',//三个可选值：initial（初始模块），async（按需加载模块）andall（所有模块）minSize:30000,//超过30k的模块自动提取到公共模块中//minChunks:1,//模块被引用>=1次，它们将被拆分maxAsyncRequests:5,//异步加载块Thenumberofconcurrentrequests<=5maxInitialRequests:5,//一个entry并发加载的chunk数<=3automaticNameDelimiter:'~',name:true,cacheGroups:{angular:{name:'angular',test:/[\\/]node_modules[\\/]@angular[\\/]/,priority:-8},monaco_editor:{test:/[\\/]node_modules[\\/](monaco-editor)[\\/]/,名称:'monaco-editor',优先级:-9},vendors:{name:'vendors',测试:/[\\/]node_modules[\\/]/,priority:-10},//缓存组，会继承并覆盖splitChunks配置default:{//模块缓存规则，设置为false，默认缓存组会禁用minChunks:2,//的模块被引用>=2次，拆分为供应商公共模块priority:-20,//优先级reuseExistingChunk:true//默认使用现有模块}}}},plugins:[newwebpack.DefinePlugin({APP_VERSION:JSON.stringify(pkg.version)}),//newBundleAnalyzerPlugin(),newHtmlWebpackPlugin({filename:'index.html',template:path.join(__dirname,'src/index.html'),chunksSortMode:'manual',chunks:['styles','runtime','polyfills','scripts','vendors','main']//顺序有限，main.js必须在最后})]};我把下面的配置（1）注释掉了。BundleAnalyzerPlugin，因为不想编译时自动启动，所以选择npm添加脚本命令，执行生成stat.json的命令，必要时运行“analyze”：“webpack-bundle-analyzerdist/stats.json”(2)DefinePlugin测试是否引入了webpack.config.js注意：ngbuild模式或者builder是custom-builder才能生效在app.component.ts中声明declarevarAPP_VERSION:string;@Component({selector:'root',templateUrl:'./app.component.html',styleUrls:['./app.component.less']})ngOnInit():void{console.log('APP_VERSION:',APP_VERSION);}(3)最重要的是htmlwebpackpluginsplitChunks把最重要的node_modulesangularmonaco-editor三个最重要的大包每个包都从主入口main.js中提取出来。如果不使用htmlwebpackplugin，angular.json默认配置生成的html是不会引入我新提取的js的，配置mergeRules和mergeStrategies也不好用。"customWebpackConfig":{"path":"./webpack.config.js","mergeRules":{"externals":"replace"},"mergeStrategies":{"module.rules":"prepend"},"replaceDuplicatePlugins":true}最后使用htmlwebpackplugin生成的html，并修改angular.json配置，将原来html的名称改为"index":{"input":"src/index.html","output":"index-old.html"}，最后附上完整的angular.json"architect":{"build":{"builder":"@angular-builders/custom-webpack:browser","options":{"outputPath":"dist/onenote","index":{"input":"src/index.html","output":"index-old.html"},"main":"src/main.TS",“polyfills”：“src/polyfills.ts”，“tsConfig”：“src/tsconfig.app.json”，“assets”：[“src/favicon.ico”，“src/assets”，{“glob”："**/*","input":"./node_modules/mathjax","output":"/"},{"glob":"**/*","input":"./node_modules/@ant-design/icons-angular/src/inline-svg/","output":"/assets/"},{"glob":"**/*","input":"./WEB-INF","output":"/WEB-INF/"}],"styles":["src/styles/theme/light/antd-light.less","src/styles.less","./node_modules/highlight.js/styles/github.css","./node_modules/monaco-editor/min/vs/editor/editor.main.css","./node_modules/github-markdown-css/github-markdown.css"],"stylePreprocessorOptions":{"includePaths":["src/styles/theme","src/styles/theme/dark","src/styles/theme/light"]},"scripts":["node_modules/mathjax/MathJax.js","node_modules/systemjs/dist/s.js","node_modules/systemjs/dist/extras/amd.js","node_modules/systemjs/dist/extras/named-register.js","node_modules/systemjs/dist/extras/use-default.js"],"customWebpackConfig":{"path":"./webpack.config.js"}},"configurations":{"production":{"fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.prod.ts"}],"optimization":true,"outputHashing":"all","sourceMap":true,"extractCss":true,"namedChunks":false,“aot”:true,“extractLicenses”:true,“vendorChunk”:false,“buildOptimizer”:true,},“analyzer”:{"optimization":true,"outputHashing":"all","sourceMap":true,"namedChunks":true,"extractCss":true,"extractLicenses":true,"vendorChunk":true,"buildOptimizer":true,}}},"serve":{"builder":"@angular-builders/custom-webpack:dev-server","options":{"browserTarget":"onenote:build","customWebpackConfig":{"路径":"./webpack.config.js"}},"configurations":{"production":{"browserTarget":"onenote:build:production"}}},"extract-i18n":{"builder":"@angular-devkit/build-angular:extract-i18n","options":{"browserTarget":"onenote:build"}},"test":{"builder":"ngx-build-plus:karma","options":{"main":"src/test.ts","polyfills":"src/polyfills.ts","tsConfig":"src/tsconfig.spec.json","karmaConfig":"src/karma.conf.js","styles":["src/styles.less"],"scripts":[],"assets":["src/favicon.ico","src/assets"]}},"lint":{"builder":"@angular-devkit/build-angular:tslint","options":{"tsConfig":["src/tsconfig.app.json","src/tsconfig.spec.json"],"exclude":["**/node_modules/**"]}}}final优化后感觉请求太多了。接下来就是添加file-loder，url-loder会将图片转成base64并加载，减少请求。
