Angular 1.6.x结合Webpack实现按需加载的方案咨询

嘿，针对你这个Angular + Webpack 1.3.x的懒加载需求，我给你梳理一套可行的实现方案，完全贴合你的「登录区入口加载、用户区登录后加载、个人区按需加载」的场景：

核心思路 #

Webpack 1.x 实现懒加载的核心是 require.ensure() 语法，它能帮我们把指定模块拆分到独立的chunk文件中，只有在代码执行到这个方法时才会加载对应的chunk。结合Angular的路由配置和模块动态注册，就能实现分区域的按需加载。

第一步：调整Webpack配置 #

首先要确保Webpack能正确生成懒加载的chunk文件，修改webpack.config.js的output配置：

module.exports = {
  entry: {
    index: './src/index.js', // 仅包含登录相关逻辑
    vendor: ['angular', 'angular-route'] // 第三方包单独拆分
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    chunkFilename: '[name].chunk.js' // 懒加载chunk的命名规则，方便区分
  },
  // 其他配置（loader、插件等）保持原有设置
};

第二步：重构入口文件，仅加载登录区 #

原来的index.js是注册所有模块，现在要改成只初始化主应用，并仅配置登录路由：

// src/index.js
// 仅引入登录相关模块
require('./login/login.controller');
require('./login/login.html');

angular.module('myApp', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      // 登录路由：入口直接加载
      .when('/login', {
        templateUrl: 'login/login.html',
        controller: 'LoginController'
      })
      .otherwise('/login');
  }]);

第三步：登录成功后加载用户区 #

在登录控制器中，完成登录验证后，通过require.ensure()加载用户区模块，并动态注册到主应用，再跳转到用户区路由：

// src/login/login.controller.js
angular.module('myApp')
  .controller('LoginController', ['$scope', '$location', function($scope, $location) {
    $scope.handleLogin = function(username, password) {
      // 这里替换成你的登录验证逻辑
      if (username && password) {
        // 加载用户区模块，第三个参数"user"是chunk名称，对应生成user.chunk.js
        require.ensure([], function(require) {
          // 引入用户区模块
          const userModule = require('../user/user.module');
          // 动态注册到主应用
          angular.module('myApp').requires.push(userModule.name);
          
          // 跳转到用户首页
          $location.path('/user/home');
        }, 'user');
      }
    };
  }]);

用户区模块的示例（user.module.js），里面配置用户区的路由，并预留个人区的懒加载入口：

// src/user/user.module.js
require('./user-home.controller');
require('./user-home.html');

angular.module('userModule', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/user/home', {
        templateUrl: 'user/user-home.html',
        controller: 'UserHomeController'
      })
      // 个人区路由：配置resolve实现懒加载
      .when('/user/profile', {
        template: '<div ui-view></div>', // 占位视图
        resolve: {
          loadProfileModule: ['$q', function($q) {
            const deferred = $q.defer();
            // 进入该路由时才加载个人区模块
            require.ensure([], function(require) {
              const profileModule = require('./profile/profile.module');
              // 注册到用户区模块
              angular.module('userModule').requires.push(profileModule.name);
              deferred.resolve();
            }, 'profile'); // chunk名称为profile，生成profile.chunk.js
            return deferred.promise;
          }]
        }
      });
  }]);

第四步：个人区按需加载 #

个人区模块的实现和普通模块一致，会在用户进入/user/profile路由时被加载：

// src/user/profile/profile.module.js
require('./profile.controller');
require('./profile.html');

angular.module('profileModule', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/user/profile', {
        templateUrl: 'user/profile/profile.html',
        controller: 'ProfileController'
      });
  }]);

关键注意事项 #

• 动态模块注册：Angular模块需要手动添加到父模块的requires数组中，这样应用才能识别新加载的模块和路由。
• chunk命名：require.ensure()的第三个参数是chunk名称，能帮你更清晰地管理生成的懒加载文件，避免混淆。
• 依赖共享：因为你已经拆分了vendor.js，所有懒加载的chunk都会自动复用vendor.js中的第三方库（比如Angular），不会重复打包。

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