公众号:程序员波波
React中支持异步加载script,通过react-loadable可以在React中异步import。
但是目前遇到一个问题,引入全局的script标签。但是如果把所有标签全部写在index.html中的话,那么第一页加载的速度会变慢,所以希望实现异步引入script标签的方法。
目前通过document.createElement的方法来动态创建脚本标签,然后通过document.body.appendChild将脚本加入body中。然后在页面componentDidMount的时候调用改方法。做了一些状态处理。
封装在Tools类中:
class Tools
{
static asyncLoadScript(url, callback)
{
let old_script = document.getElementById(url);
if (old_script)
{
if (old_script.ready == true)
{
// console.log("INFO:already load:" + url);
callback();
return;
}
else
{
document.body.removeChild(old_script);
// console.log("INFO:remove an old script that not ready:" + url);
}
}
let script = document.createElement('script');
script.id = url;
script.src = url;
script.onload = script.onreadystatechange = function() {
if (script.ready) {
return false;
}
if (!script.readyState //这是FF的判断语句,因为ff下没有readyState这个值,IE的readyState肯定有值
|| script.readyState == "loaded" || script.readyState == 'complete' // 这是IE的判断语句
) {
// console.log("INFO:load:" + url);
script.ready = true;
callback();
}
};
document.body.appendChild(script);
}
static asyncLoadScripts(scripts, callback)
{
var ok = 0;
for (var i=0; i < scripts.length; i++) {
Tools.asyncLoadScript(scripts[i], function() {
ok++;
if (ok==scripts.length)
{
callback();
}
})
}
}
}
export default Tools;
然后调用:
Tools.asyncLoadScripts(_dependScripts, function(){
initView()
});