浅谈VUE单页应用首屏加载速度优化方案

修改 build/webpack.base.conf.js

修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource

路由懒加载

将一些静态js css放到其他地方（如OSS），减小服务器压力

注意这里的js文件，需要将结果抛出，然后在需要用到该js的组件中import引入

按需加载三方资源，如iview,建议按需引入iview中的组件

按需引用请查看iview官方文档iview

使用nginx开启gzip减小网络传输的流量大小

配置nginx，可以参考

webpack开启gzip压缩

这里需要配合Nginx服务器，Nginx开启gzip

config/index.js中

build/webpack.prod.conf.js中

使用vue-cli构建项目时，默认会有这段代码

若首屏为登录页，可以做成多入口，登录页单独分离为一个入口

修改webpack配置

在原先只有一个入口叫app的基础上，再加一个叫login的入口，指向另一个入口js文件；

既然是两个页面，那么原先只有一个的HtmlWebpackPlugin也需要再添加一个，并且filename和template改成登录页的；

HtmlWebpackPlugin默认会把所有资源放进html，为了去掉不需要的资源，需要在HtmlWebpackPlugin选项里分别添加excludeChunks: ['login']和excludeChunks: ['app']；

原先的某些CommonsChunkPlugin会导致报错，删掉只剩下一个manifest的CommonsChunkPlugin就好。

添加登录相关文件

添加之前配好的login入口文件，与app类似，但是去掉登录页不需要的东西，如用不到的组件和样式等；

添加login入口专用的router配置文件，去掉其他路由，只留下登录页一个就好：

添加登录页的html模板，也是去掉登录里用不到的资源。

修改其他细节

登录完不是用vue-router的push方法，而是改成直接修改location.href跳到另一个页面；

去除原来app路由中的login；

登录页中可以使用隐藏的iframe等方式预加载app页面中的数据（猜想）。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!