Angular 16构建时如何压缩移除未用JS/CSS以优化FCP/LCP并兼容PWA？

完全可以在构建阶段对JS、CSS文件进行压缩、混淆并移除未使用代码，这不仅是Angular应用优化的标准操作，还能有效提升FCP/LCP指标，同时不会破坏PWA兼容性。以下是具体说明和操作要点：

一、Angular CLI默认支持的构建优化 #

Angular 16的生产构建（ng build --configuration production）默认已经启用了以下优化，无需额外配置：

• JS压缩与混淆：通过Terser对JS文件进行压缩、混淆和死代码消除，同时结合Tree-Shaking移除未被引用的模块和代码（独立组件的模块化设计会让Tree-Shaking效果更显著，因为独立组件无模块依赖，未使用的组件更容易被剔除）。
• CSS压缩与未使用代码移除：使用CSSO压缩CSS文件，同时通过PurgeCSS移除全局样式中未被页面使用的代码。如果使用组件级样式（独立组件默认支持），Angular的样式封装机制也会自动避免样式冗余。

二、对FCP/LCP指标的提升作用 #

这些优化直接作用于资源加载阶段，对核心Web指标的提升非常明显：

• FCP优化：压缩后的JS/CSS文件体积更小，浏览器下载和解析时间缩短，能更快完成初始渲染，直接提升首次内容绘制的速度。
• LCP优化：如果LCP元素的样式或关联脚本被优化后体积减小，浏览器能更快完成样式计算和脚本执行，加速最大内容元素的渲染。结合SSR场景，优化后的前端资源能更快完成Hydration（水化），避免阻塞页面内容的渲染。

三、保障PWA兼容性的注意事项 #

Angular的PWA插件（@angular/pwa）会自动适配构建优化后的资源：

• 插件生成的ngsw-config.json会自动扫描构建输出的优化文件，生成正确的缓存清单，确保Service Worker能准确缓存所有必要资源。
• 构建完成后，建议通过ng serve --configuration production验证PWA功能，确认离线状态下页面能正常加载，避免出现缓存资源不匹配的问题。

四、结合SSR与独立组件的额外优化建议 #

针对你的应用架构，还可以补充以下优化进一步提升指标：

• 启用serverBundleOptimizer：在angular.json的生产配置中开启serverBundleOptimizer: true，优化SSR的服务器端Bundle，减少服务器渲染时间，让前端更快接收完整的HTML内容，助力FCP提升。
• 优化组件样式：对独立组件采用ViewEncapsulation.ShadowDom（Angular 16支持），进一步隔离样式，配合未使用代码移除，最大化减小CSS体积。
• 调整懒加载预加载策略：如果部分LCP相关模块采用懒加载，可配置PreloadAllModules或自定义预加载策略，优先加载核心资源，避免LCP元素因资源加载延迟而推迟渲染。

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