javascript - vue脚本延迟加载

Question

最近我使用 vue 和 laravel 创建了一个管理面板。

一切正常，但一个问题是我编译的脚本文件几乎是 7mb 文件(即位于公共(public)文件夹中的 app.js)，因为这个编译的脚本浏览器需要很长的加载时间来加载初始(登陆页面)在浏览器上，即在将近 1 分钟的 7mb 脚本下载到浏览器中之前，它不会呈现页面。

是否可以在开始时加载一个组件，然后根据用户点击加载其他组件。

更详细地说:假设我的 app.js 文件有 1K 行代码，并且在开始时如果下载了几行代码

然后它呈现页面，即它不应该在呈现页面之后等待下载完整的 7mb 脚本。

有没有办法减少这个加载时间。我做了很多谷歌，但没有找到任何解决方案

Answer 1

尝试使用es6动态导入。这entry in vue document和 link in vue-router可能对你有帮助

此外，在我看来，7 MB 的纯 JavaScript 代码是一个非常复杂的水疗中心。您确定要缩小代码并避免捆绑大图像之类的东西吗？

既然你使用了vue-router，我建议你使用vue-router文档中描述的方法，因为它基于vue组件的异步加载和webpack的代码拆分特性。

请记住导入 syntax-dynamic-import 插件以避免您上面提到的意外 token 错误。