Angular 6+Webpack构建时platformBrowserDynamic体积过大的优化咨询

刚上手用Webpack构建Angular 6项目确实容易踩打包体积的坑，尤其是platformBrowserDynamic带来的冗余体积问题，我给你几个实操性强的优化方向：

1. 切换到AOT（提前编译）模式，替换JIT编译 #

你当前用的platformBrowserDynamic是Angular JIT（即时编译）模式的入口，这种模式会把Angular编译器打包到最终产物里，让浏览器在运行时编译组件，这也是体积过大的核心原因。

换成AOT模式后，编译过程在构建阶段就完成了，不需要把编译器打包进去，体积能直接砍一大截。修改后的main.ts代码如下：

import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
// AOT编译后会自动生成这个NgFactory文件
import { AppModuleNgFactory } from './app/app.module.ngfactory';

// 开启生产模式，禁用开发环境的调试工具和警告
enableProdMode();

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory)
  .catch(err => console.error(err));

如果是用Angular CLI构建，直接执行ng build --prod就会自动启用AOT，不需要手动修改main.ts，CLI会帮你处理入口文件的替换。

2. 开启Webpack Tree Shaking #

Tree Shaking能帮你剔除代码中未被使用的部分，进一步缩小体积：

• 确保Webpack的mode设置为production（开发模式下Tree Shaking默认关闭）；
• 在tsconfig.json里把compilerOptions.module设为es2015或更高版本，这样Webpack才能识别ES模块语法，准确摇掉冗余代码；
• 避免在代码中使用CommonJS模块（比如require()），会破坏Tree Shaking效果。

3. 优化Webpack分包策略 #

把第三方依赖（包括Angular核心库）和业务代码拆分成独立的chunk，既能减小主包体积，还能利用浏览器缓存提升后续加载速度：

• 如果用Angular CLI，ng build --prod会自动生成vendor.js、main.js等分包；
• 手动配置Webpack的话，可以用SplitChunksPlugin来拆分chunk，比如把@angular/*相关的依赖单独打包成一个vendor chunk。

4. 压缩混淆代码 #

生产环境下一定要启用代码压缩：

• Webpack 4+在production模式下会自动用terser-webpack-plugin压缩代码，去掉注释、死代码，缩短变量名；
• 也可以额外配置angular-minifier-plugin来针对Angular代码做更精准的压缩优化。

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