angularjs1结合ui-router、ocLazyLoad分步按需加载js文件

矫情吗；* 2022-06-10 05:09 245阅读 0赞

还在使用angular1进行开发的前端小伙伴有没有想过这个问题，当项目不断延伸扩展时，页面开始增多，js,css文件同样会增多，如果继续使用粗暴的将所有文件加载在index.html页面中，那么首页就会加载很多无用的代码，从而造成首屏加载时间过长，首页加载时间超长我想没有一个用户能忍的吧，直接 GG 了。

那么，可不可以做到，首页只引入首屏需要显示的必要代码，而在必要的时候再去加载各个模块的代码，做到按需懒加载呢？

我们只要在使用angular时配合ui-router、ocLazyLoad就可以实现分步按需加载js文件。

步骤如下：

> 1 、首先完成页面对angular、ui-router、ocLazyLoad的引入；

注：因为后面两个都是angular的插件，这就会导致一个问题，如果相互之间版本级别相差太大，那么100%会挂。

> 2、配置路由和loader

> 3、此时我们就已经完成了配置，但是有些小伙伴会遇到这个问题  
> `Error: [ng:areq] Argument 'ModalInstanceCtrl' is not a function, got undefined.`

解决这个问题的方法很简单，只需要在你每个引入的js文件里面再次重新定义`var myapp = angular.module('myApp');`即可（有些小伙伴不会出现这个问题，因为你在每个引入的js文件中已经重新配置myapp了），如下图：  
![这里写图片描述][SouthEast]

到此，我们就实现了在angularjs1中结合ui-router、ocLazyLoad分步按需加载js文件，祝小伙伴成功，遇到问题欢迎留言~

[SouthEast]: /images/20220610/ccf1859d3cca4f148c686672d3b27fbe.png