我应该使用Browserify还是Webpack来实现Angular 1.x中的依赖项懒加载？

Question

我希望在一个大型应用程序中实现angular依赖项的异步加载，我正在尝试在Browserify和Webpack之间做出决定。我知道angular 2.0将原生支持此功能，但现在我正在寻找一个受支持且流行的解决方案。

有人可以给出哪个最适合在angular团队中使用以及项目结构的最佳优化建议吗？

- Nikos

Answer 1

在我们公司，我们因为许多原因已经从Browserify转换到Webpack，其中之一是懒加载。

在Browserify中将事物放入多个包中需要进行一些配置更改以及特殊代码。这里有一个很好的指南：http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/。

使用webpack，只需要在配置文件的entry行中添加一个新的包就可以了。这里有一个快速指南：https://github.com/petehunt/webpack-howto#7-multiple-entrypoints。对于懒加载，甚至不需要在配置文件中更改任何内容，非常棒-只需使用这里详细介绍的异步require语法：https://github.com/petehunt/webpack-howto#9-async-loading。

这是一个设置模板，非常类似于我们在生产中使用的情况，你可以在这里找到：https://bench.co 。 https://github.com/jeffling/angular-webpack-example/。

- Jeff Ling

---

使用 webpack 和 gulp 添加步骤的 Angular Phonecat 教程扩展版。非常简单易懂的逐步示例。 - escapedcat

谢谢Jeff！你有没有可能扩展你的Angular Webpack示例，以展示如何在运行时加载额外的模块或控制器？ - Nikos

@Nikos 没问题 :) 我可能会在示例中省略它，因为我觉得人们现在主要因为它的极简性而发现它有用。也许我们可以在项目的问题中谈论这个问题。你能创建一个问题吗？我们可以在那里聊天。就记录而言，在运行时懒加载东西要复杂一些，因为 Angular 模块系统的工作方式。您将不得不按照 Pete Hunt 的示例 + https://github.com/ocombe/ocLazyLoad 进行组合懒加载。 - Jeff Ling

@JeffLing，我创建了一个仓库来保存这个项目：https://github.com/QuantumInformation/angular-webpack-lazy-loading，尽管我不会使用coffee。 - Nikos

我实际上是想让我们创建一个问题，但我喜欢制作一个可能包含良好示例的新项目的想法。 - Jeff Ling

@Nikos 这不是懒加载。这个是懒加载。 - Gaui

Answer 2

嗨，你应该选择webpack，因为它支持多种文件类型（css、js等），并且可以将代码分离成多个模块。

- Tarjei Huse