我应该在Angular 1.x中使用Browserify还是Webpack来实现依赖的延迟加载?

36 浏览
0 Comments

我应该在Angular 1.x中使用Browserify还是Webpack来实现依赖的延迟加载?

我想在一个大型应用程序中实现Angular依赖的异步加载,并且我正在尝试在BrowserifyWebpack之间做出决定。我知道Angular 2.0将原生支持此功能,但目前我正在寻找一个得到良好支持且流行的解决方案。

有人能否给出关于哪个方案最适合Angular团队以及项目结构最优化的建议?

0
0 Comments

从上面的内容中,可以得出以下信息:

问题的原因:

- 需要选择一个工具来实现在Angular 1.x中进行懒加载依赖项的功能。

解决方法:

- 建议使用Webpack,因为它支持多种文件类型(如CSS、JS等),并且可以将代码分离成多个模块。

根据以上信息,我们可以整理成以下文章:

标题:在Angular 1.x中使用Browserify还是Webpack进行依赖项的懒加载?

在开发Angular 1.x应用程序时,我们经常会遇到需要懒加载依赖项的情况。那么,在这种情况下,我们应该选择使用Browserify还是Webpack呢?

如果你需要一个支持多种文件类型的工具,并且可以将代码分离成多个模块,那么我建议你选择Webpack。Webpack不仅支持CSS和JS等多种文件类型,而且可以将代码分离成多个模块,使得应用程序更加模块化和可维护。

下面是一个使用Webpack的示例代码:

// 定义一个模块
angular.module('lazyModule', [])
    .controller('LazyController', ['$scope', function($scope) {
        // 控制器逻辑
    }])
    .directive('lazyDirective', function() {
        // 指令逻辑
    });
// 在应用程序中懒加载该模块
require.ensure([], function(require) {
    // 引入懒加载模块
    var lazyModule = require('./lazyModule');
    // 注册懒加载模块
    angular.module('app', ['lazyModule'])
        .controller('MainController', ['$scope', function($scope) {
            // 控制器逻辑
        }]);
});

通过使用Webpack,我们可以将Angular模块分离成多个文件,并在需要的时候进行动态加载。这样可以提高应用程序的性能,并且使得代码更加清晰和易于维护。

总结起来,如果你需要在Angular 1.x中实现依赖项的懒加载功能,我建议你使用Webpack。它可以支持多种文件类型,并且可以将代码分离成多个模块,使得应用程序更加模块化和可维护。希望这篇文章对你在选择合适的工具时能有所帮助!

0
0 Comments

在我们公司,我们从browserify切换到webpack是因为很多原因,其中之一就是懒加载。在browserify中将内容放入多个bundle需要进行一些配置更改以及特殊的代码。在这里有一个很好的指南:https://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/

而在webpack中,添加一个新的bundle只需要在配置文件的入口文件行中添加一个额外的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/

带有webpack和gulp的Angular Phonecat教程的扩展版本。非常简单的逐步示例。

谢谢Jeff!你有没有可能扩展你的angular webpack示例,展示如何在运行时加载额外的模块或控制器?

没问题 🙂 我可能会在示例中省略这个部分,因为我觉得人们现在主要是因为它的极简性才觉得它有用。也许我们可以在项目的问题中讨论一下。你能创建一个问题吗?我们可以在那里聊天。

记录一下,由于angular模块系统的工作方式,运行时懒加载东西会更加复杂。你将不得不按照pete hunt的示例结合github.com/ocombe/ocLazyLoad进行懒加载。

当然,我已经创建了一个存放这个的存储库:github.com/QuantumInformation/angular-webpack-lazy-loading,尽管我不会在里面使用coffee)

实际上,我是希望我们创建一个问题,但我喜欢创建一个新项目,其中可能包含一个很好的示例。

那不是懒加载。这才是懒加载

0