如何控制或降低Angular 2中JS文件的加载时长？

你在本地源码中找不到对应JS文件属于正常情况，这些带哈希后缀的*.bundle.js是前端项目通过Webpack、Angular CLI等构建工具打包编译后生成的产物，只需调整项目的构建配置、重新打包即可生成新的产物文件。

自有站点静态资源优化（4个bundle文件、woff2字体） #

• 拆包减体积：调整打包配置做代码分割，把不常更新的第三方依赖单独拆包，业务代码开启路由懒加载、按需引入，避免单个bundle体积过大。
• 开启资源压缩：打包时开启JS的gzip或Brotli压缩，同时在服务端配置对应压缩规则，可将传输体积降低60%以上。
• 配置长期缓存：给这类带哈希后缀的静态资源配置服务端缓存头 Cache-Control: max-age=31536000, immutable，用户二次访问时直接读取本地缓存，无需重新请求。
• 字体专项优化：给woff2字体标签添加preload预加载属性，同时裁剪字体子集只保留站点用到的字符，减少字体文件体积。
• CDN加速：将所有自有静态资源托管到CDN节点，用户可就近访问，大幅降低网络传输耗时。

第三方外部JS优化（acsbapp.com的app.js） #

• 异步非阻塞加载：给引入该JS的script标签添加async或defer属性，避免阻塞页面DOM解析和首屏渲染。
• 本地化托管：如果该第三方资源更新频率较低，可将文件下载到本地和自有资源一起打包部署，规避第三方服务的网络波动、跨域耗时问题。
• 按需延迟加载：如果该工具不是首屏必须功能，等到触发对应业务逻辑时再动态加载该JS，无需首屏就发起请求。

通用优化建议 #

• 服务端开启HTTP/2或HTTP/3协议，支持资源多路复用，大幅提升多资源并行加载的效率。
• 梳理所有请求，合并冗余的小体积资源，减少不必要的请求开销。

内容的提问来源于stack exchange，提问作者Rahul