![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cGcq5CN4YTO5EmN4MTOlhTYhNzMzYzXyQTO1kDM4IzLclDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.jpg)
前端开发中仅在需要时的时候加载 JavaScript 模块。这样可以提供很大的性能,比如:您有一个组件,例如复杂的视频播放器,它可以使用大量 js,并且该视频仅在用户单击它时才会启动。
那么在这种情况下,用户甚至可能永远不会单击播放按钮,因此仅在需要时才加载该js模块。
因此,不要像这样使用顶级默认声明:
import * from "https://cdn.skypack.dev/jquery";
只是在需要的时候加载,代码如下:
const button = document.getElementById("btn");
button.addEventListener("click", e => {
import('https://cdn.skypack.dev/jquery')
.then(module => window.$ = module.default)
.then(makeBgOrangeWithJquery)
.catch(err => { alert(err) });
});
const makeBgOrangeWithJquery = ()=> {
$("body").css("background-color", "orangered");
}
您甚至可以将它与加载指示器之类的东西一起使用:
button.addEventListener("click", e => {
import('https://cdn.skypack.dev/jquery')
.then(module => {
window.$ = module.default;
})
.then(makeBgOrangeWithJquery)
.catch(err => { alert(err) });
});
当然,如果您的所有页面都依赖于像 jQuery 或 react 这样的库,那么动态导入该库就没有太大意义。
function loadJS(url, success) {
var domScript = document.createElement('script');
domScript.src = url;
success = success || function () {};
domScript.onload = domScript.onreadystatechange = function () {
if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
success();
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
}
}
document.getElementsByTagName('head')[0].appendChild(domScript);
}
loadJS('https://cdn.skypack.dev/jquery',function(){
//加载成功执行
});