javascript - 根据视口大小下载js库

Question

我有仅与手机等相关的汉堡菜单，即并非与所有视口相关。因此，我的bundle.js文件包含我的应用程序的桌面用户并不真正需要的 jquery。这会导致文件大小大于所需。我将我的代码与 webpack 捆绑在一起并按原样部署。现在，我没有单独的供应商文件。jquery 库是在app.js中导入的，但我发现我可以将它放在脚本标签中，动态检查分辨率并在符合条件时将其添加到头部。有没有其他方法可以解决它？

标签： javascriptjqueryreactjswebpack

Answer 1

尝试这个：

<script>
    if (screen && screen.width > 900) {
        document.write('<script type="text/javascript" src="https://example.com/desktop.js"><\/script>');
    }
</script>

<script>
    if (screen && screen.width < 900) {
        document.write('<script type="text/javascript" src="https://example.com/mobile.js"><\/script>');
    }
</script>