大幅优化Vue单页面首屏加载速度

做Vue单页面经常遇到的一大问题就是首屏加载太慢，尽管首屏可能只是一个简单的登录页，可是也要下载几百k甚至上m的整个项目的代码。一个解决方法是使用Element-ui提供的按需加载组件，但是即便如此进步也不大，仍然是几百k。既然登录页这么简单，其实可以通过把登录页和其它部分分离成两个页面来解决，让用户可以迅速地看到登录页，然后在登录页里再慢慢后台下载其它代码。如何分离呢，经过半天的研究，发现可以使用webpack的多入口功能来实现。

1.修改webpack配置

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

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

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

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

2.添加登录相关文件

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

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

只留登录路由

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

3.修改其他细节

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

去除原来app路由中的login；

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

至此，一个简洁清爽的不到100k的登录页面就诞生了，白屏时间也从5秒左右降到了1秒以内^_^