vue脚本的懒加载

Question

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

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

是否可以在开始时根据用户单击加载其他组件后最初加载一个组件。

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

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

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

Answer 1

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

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

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

记得导入 syntax-dynamic-import 插件以避免你上面提到的意外令牌错误。