首页 > 解决方案 > 如何在服务器端呈现的网站上动态加载 javascript 文件?

问题描述

有一个包含大量 javascript 文件的网站。网站不使用任何框架,只使用 webpack、jquery 和其他通过 npm 安装的插件。只是简单的 html 站点和后端的 laravel。

main.js 需要所有 javascript 文件。并将 main.js 文件添加到模板 html 文件中。

如何只为每个页面加载该页面所需的文件?例如,如果您访问联系我们页面,客户端应该只加载 contact.js 文件,而不加载 products.js、register.js 等其他文件。

当然,我可以将每个 js 文件包含到其页面中,而无需将所有 js 文件加载到一个文件中。但也许有更聪明的方法可以在我的情况下从 javascript 和 webpack 端实现它?

现在我的 javascript 文件大小是 2mb,有些页面只需要它的一小部分。因此,我只需要加载每个页面所需的内容。

标签: javascript

解决方案


如果它是经典服务器,那么我认为这是不可能的。使用像 React 这样的 Javascript 库,您可以考虑代码拆分。

我认为您最初的方法是将它们拆分为各自的.js文件,就目前而言,这是最好的方法


推荐阅读