vue脚本的懒加载

Question

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

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

是否可以根据用户单击加载其他组件在启动时加载最初的一个组件。

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

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

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

Answer 1

尝试使用 es6 动态导入。 vue 文档中的这个条目和vue-router 中的链接可能会对您有所帮助

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

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

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