各位做前端的朋友有没做过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，然后其它都是异步加载。