延迟加载vue脚本

时间:2018-02-17 11:12:46

标签: javascript laravel-5 vue.js

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

所有工作正常但一个问题是我的编译脚本文件几乎是7mb文件(即位于公共文件夹中的app.js)因为这个编译过的脚本浏览器需要很长的加载时间才能加载初始化(登陆页面)在浏览器上,即直到7mb脚本在浏览器中下载几乎1分钟后才会呈现页面。

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

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

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

无论如何都要减少加载时间。我做了很多谷歌,但没有找到任何解决方案

1 个答案:

答案 0 :(得分:3)

尝试使用es6动态导入。 entry in vue documentlink in vue-router可以帮助您

此外,就我而言,7 MB的纯JavaScript代码是一个非常复杂的spa。您确定要缩小代码并避免捆绑大图像吗?

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

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