使用 oclazyload 和 webpack 代码拆分避免角度路由中的代码重复答案

【问题标题】：Avoid code duplication in angular routing with oclazyload and webpack code splitting使用 oclazyload 和 webpack 代码拆分避免角度路由中的代码重复
【发布时间】：2017-07-15 01:50:08
【问题描述】：

我目前在一个项目中使用 angular 1.5，我的路由看起来像这样：

const routes = ($stateProvider) => {

  $stateProvider
    .state('update', {
      url: '/update',
      template: '<update></update>',
      resolve: {
        lazyload: [ '$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
             console.log('start lazy');
             let deferred = $q.defer();
             require.ensure([], function () {
             let module = require('../components/update/update.module');
               let module = require('../components/update/update.module');
               $ocLazyLoad.load({
                 name: module.default.name
               });
               deferred.resolve(module);
             });
             return deferred.promise;
           }
         ]
      }
    })
    .state('login', {
      url: '/login',
      template: '<login></login>',
      resolve: {
        lazyload: [ '$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
            let deferred = $q.defer();
            require.ensure([], function () {
              let module = require('../components/login/login.module');
              $ocLazyLoad.load({
                name: module.default.name
              });
              deferred.resolve(module)
            });
            return deferred.promise;
          }
        ]
      }
    });

};

当我尝试在这样的单独函数中提取重复代码时：

function load (modulePath) {
    return function ($q, $ocLazyLoad) {
      let deferred = $q.defer();
      require.ensure([], function () {
      let module = require(modulePath);
        $ocLazyLoad.load({
          name: module.default.name
        });
        deferred.resolve(module);
      });
      return deferred.promise;
    }
  }

并以这种方式使用加载功能：

$stateProvider
    .state('update', {
      url: '/update',
      template: '<update></update>',
      resolve: {
        lazyload: [ '$q', '$ocLazyLoad', load('../components/update/update.module')]
      }
    })

路由不再起作用，我在 webpackMissingModule 处收到此错误“找不到模块”。”

【问题讨论】：

标签： angularjs webpack oclazyload

【解决方案1】：

使用动态 require 时，不要在参数中包含路径和扩展名。

把你所有的惰性模块需要放在一个单独的文件夹lazy。

function load (state) {
  return function ($q, $ocLazyLoad) {
    let deferred = $q.defer();
    require.ensure([], function () {
      let module = require('../components/lazy/' +state+ '.module');
      $ocLazyLoad.load({
        name: module.default.name
      });
      deferred.resolve(module);
    });
    return deferred.promise;
  }
}

$stateProvider
.state('update', {
  url: '/update',
  template: '<update></update>',
  resolve: {
    lazyload: [ '$q', '$ocLazyLoad', load('update')]
  }
})

您可以使用与建议的结构不同的结构。参考https://webpack.github.io/docs/context.html#dynamic-requires

【讨论】：