angularJS懒加载实现

angularJS懒加载，主要是分担首页文件加载效率提高渲染性能，实现要点：

    1、项目模块化

        使用import/export 进行模块化

    2、路由

        使用ui-router进行路由切换

    3、模块异步加载

        1）使用import()实现文件动态加载

        2）使用ocLazyLoad实现angular模块加载

实现

    1、依赖文件加载

import uiRouter from '@uirouter/angularjs';

import oc from 'oclazyload';

const app = angular. module( 'app', [ uiRouter, oc]);

    2、webpack.config.js与之相关配置

{

test: / \. js $ /,

exclude: / ( node_modules | bower_components ) /,

use: {

loader: 'babel-loader',

options: {

"presets": [ '@babel/preset-env'],

"plugins": [ "syntax-dynamic-import"]

}

}

},{

test: / \. ( html ) $ /,

use: [ 'html-loader']

},...

    说明：按需加载html , 需要配置html-loader, 在js中使用import需要配置babel-loader

              并且需要安装 babel插件(网上查下npm install) "plugins": ["syntax-dynamic-import"]

    3、路由配置

export default [{

name: 'home',

url: '/home',

controller: 'homeController',

templateProvider : () => {

return import( './app/home/home.html');

},

resolve: {

deps:[ '$ocLazyLoad', ( $ocLazyLoad) => {

return import( './app/home/home.js'). then(( module) =>{

$ocLazyLoad. load({

name: module. name

});

})

}]

}

},{...

说明：

    1、路由配置中的resolve是路由插件自带的，需要返回Promise

    2、angularjs的app一旦运行，不允许加载module/controller/service...， 需要借助第三方插件ocLazyLoad，

来进行运行中加载模块

效果

第一次切换到home时，加载home相关文件