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相关文件