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