Angular 4 + Webpack 3.8.1编译耗时过长问题求助

兄弟，我太懂这种编译慢到让人崩溃的感觉了！之前我团队升级Angular和Webpack时也踩过几乎一模一样的坑，结合你给出的测试信息，咱们来一步步揪出问题根源，再搞定它。

从你做的测试——删掉90%业务文件但保留node_modules后，编译时间从50分钟降到2分钟——就能明确：锅不在依赖库太多！要是node_modules的问题，哪怕删光业务文件，编译时间也不会差这么多。真正的问题出在业务代码的编译处理逻辑上，或者是Webpack/Angular升级后的配置不兼容。

1. Webpack 3的文件扫描范围失控了 #

Webpack 1到3的模块解析规则改了不少，要是你的配置没跟上，很可能让Webpack瞎扫一堆无关文件：

• 先检查entry配置，别不小心把整个目录都引进去了（比如写了./src/**/*这种太宽泛的路径）；
• 优化resolve.modules，只指定node_modules和你自己的模块目录，别让Webpack全局乱找；
• 给每个loader加上明确的exclude规则！比如ts-loader要排除node_modules和测试文件，示例代码：

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: ['ts-loader', 'angular2-template-loader'],
        exclude: [/node_modules/, /\.spec\.ts$/, /docs/]
      }
    ]
  }
  

  尤其是那些非源码目录（比如docs、test、assets里的冗余文件），一定要排除，不然Webpack会挨个扫描一遍。

2. Angular 4的编译逻辑变了，你的配置没跟上 #

Angular 4对AOT编译的支持更深入了，要是你还在用JIT模式处理几百个组件，那编译慢到离谱太正常了：

• 赶紧开AOT！不管是用Angular CLI还是自定义Webpack配置，把aot: true加上——AOT虽然首次编译会比JIT慢一点，但绝对慢不到50分钟，反而JIT要实时编译所有模板，量大了直接崩；
• 检查tsconfig.json里的angularCompilerOptions，如果不是项目必须，先把strictTemplates这种严格检查关掉，等编译正常了再慢慢开。

3. 你的项目里藏了太多冗余文件 #

300MB的前端目录，肯定有不少没被Webpack过滤的垃圾文件：

• 用webpack-bundle-analyzer插件分析一下打包内容，看看有没有意外打包的大文件（比如几十MB的静态资源）或者重复模块；
• 手动清理项目里的冗余文件：比如旧版本的测试用例、废弃的组件、没用到的静态资源，这些都会让Webpack在编译时做无用功。

4. Loader版本不兼容 #

Angular 4和Webpack 3对loader版本有要求，太高或太低都会出问题：

• ts-loader建议锁定在^3.5.0，这个版本和Webpack 3、Angular 4兼容性最好；
• angular2-template-loader也要对应Angular 4的版本，别装最新版，不然模板解析时可能会出现异常遍历。

你可以试试逐步恢复业务文件：把之前删掉的90%文件分批加回去，每加一批就跑一次编译，看加到哪一批时编译时间突然飙升——这样就能精准定位到是哪个组件、哪个文件导致的问题，比如某个组件引入了大量本地静态资源，或者模板里写了超级复杂的管道/指令，让编译逻辑过载。

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