js预加载loading的另类优化方案
各位做前端的朋友有没做过loading预加载素材的功能，一般游戏开发正常都会用到。其实加载多图的时候我们为了优化体验都是需要做loading效果的。
哪些东西需要loading？最常见的就是图片，部分用到json等配置文件的也可以loading，再有就是部分音效，甚至js代码也可以loading预加载。很多朋友还停留在普通的网页前端，还没有loading的意识。尤其很多依赖框架开发的朋友，优化需求来了无从下手。
如何实现loading效果？今天我们不谈代码，主要谈一下思路。一个类客户端的web软件，往往是要考虑UI框架的加载，然后考虑主页图片素材的加载，然后功能页也得考虑加载。既然是loading那么第一个页面肯定是个单独的loading页面，尽可能的在这个页面少调用js，少调用图片。基本上loading页面整个html+js+css+图片控制在200k内，千万别用繁重的框架，一上来先加载个1-2MB的js，搞的客户火气很大，尤其是我们教学类软件很多动画效果，有的时候框架选不好，砸了自己招牌。
因此我们需要从原理上考虑这个loading效果，就是加载的优化。很多框架没有很好的loading方案，包括目前比较火的vue、uniapp、angularjs等等，尽管有一些方案但是不那么容易实现。这里我来给个野生思路，这个思路来源于游戏外挂，就是做一个外挂程序，nodejs、php都可以轻松实现。
首先我们用后端程序分析出编译好的文件，如
<script src=./static/js/chunk-vendors.cfb20cce.js></script><script src=./static/js/index.30e098f1.js></script>
替换为下面代码（demo的主要部分）
<script src=./static/js/preloadjs.min.js></script>
<script>
var need_loading_list=[];
var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete);
queue.on('progress', handleProgress);
queue.loadManifest(need_loading_list);
function handleComplete() {
//隐藏loading代码
//重新加载js
document.write(`<script src=./static/js/chunk-vendors.cfb20cce.js></script><script src=./static/js/index.30e098f1.js></script>`);
}
function handleProgress() {
//loading进度条展示的代码
}
</script>还需要用后端语言读取编译后的素材，如static文件夹，得到一个需要提前loading的list（实际情况可以根据每个页面的需要，用后端程序自动分析出对应页面用到的素材），同时后端代码直接修改编译好的文件进行代码的修改，达到自动化效果，当一个工具使用。
这是个野生程序猿的野生思路，不一定适合多数人，但是效果可以保证，已经用在多个项目里了。我一般控制首次加载不超过200K，然后其它都是异步加载。