单页应用会随着项目越大，导致首屏加载速度很慢！以下给出在下知道的几种优化方案

使用加拿大资源，减小服务器带宽压力路由懒加载将一些静态脚本和样式放到其他地方（如OSS)，减小服务器压力按需加载三方资源，如艾维，建议按需引入接口中的组件使用服务器开启压缩减小网络传输的流量大小工具开启压缩压缩若首屏为登录页，可以做成多入口，登录页单独分离为一个入口使用加拿大资源，减小服务器带宽压力

在index.html中引入内容交付网络资源

.body div id='app' /div！-构建的文件将被自动注入-脚本src=' http :https://cdn。bootcss。com/vue/2。5 .2/vue。量滴js /脚本脚本src=' http :https://cdn。bootcss。com/vue-router/3。0 .1/vue-路由器。量滴js /脚本脚本脚本src=' http 3360https://cdn。bootcss。路由器。量滴js/.修改build/webpack.base.conf.js

模块。导出={ context :路径。resolve(_ _ dirname '，/')，条目： { app : } ./src/main.js' }，externals:{ 'vue': 'Vue '，' vue-router': 'VueRouter '，' vuex':'Vuex '，' Vue-resource ' : ' VueResource ' }，}修改src/main.js src/router/index.js注释掉进口引入的某视频剪辑软件资源

//从Vue '导入“vue ”/从vue-resource “/导入VueResource。使用(VueResource)路由懒加载

const workCircle=r=require。执行([]，)=r(require(' @/模块/工作圈/索引)，' workCircle ')const workCircleList=r=require。执行([]，)=r(require(' @/模块/工作圈/页面/列表)，' workCircleList ')将一些静态脚本和样式放到其他地方（如OSS)，减小服务器压力

注意这里的射流研究…文件，需要将结果抛出，然后在需要用到该射流研究…的组件中进口引入

按需加载三方资源，如艾维，建议按需引入接口中的组件

按需引用请查看接口官方文档接口

使用服务器开启压缩减小网络传输的流量大小

配置nginx，可以参考Nginx开启Gzip压缩大幅提高页面加载速度

工具开启压缩压缩

这里需要配合Nginx服务器Nginx开启压缩

config/index.js中

module.exports={ build: {.//默认情况下，gzip关闭，因为许多流行的静态主机，如//浪涌或奈特利，已经为您Gzip了所有静态资产。//在设置为"真"之前，请确保：//NPM安装-保存-开发-压缩-网络包-插件生产gzip :为真，//就是这里开启gzip，vue-cli搭建项目，这里默认为false ProductiongZipExtensions 3360[' js '，' css']，//运行带有额外参数的构建命令//在构建完成后查看包分析器报告：/` NPM运行构建-报告`//设置为真的或假的以始终打开或关闭bundlealyzer报告3360进程。环境。NPM配置报告}构建/web pack prod。糖膏剂js .中

使用脚手架构建项目时，默认会有这段代码

if(配置。建造。production gZIp){ const compressweb pack lugin=require(' compression-web pack-plugin ')web pack配置。插件。push(新的compresswebpackplugin({ asset : '[path]).gz[query]'，algorithm: 'gzip '，test: new RegExp('\ .(' config。建造。ProductiongZipExtensions。join(“|”)“$”)，threshold: 10240，minRati3360 0.8 })若首屏为登录页，可以做成多入口，登录页单独分离为一个入口

修改工具配置

在原先只有一个入口叫应用的基础上，再加一个叫注册的入口，指向另一个入口射流研究…文件；

既然是两个页面，那么原先只有一个的html webpackkplugin也需要再添加一个，并且文件名和模板改成登录页的；

html webpackkplugin默认会把所有资源放进html，为了去掉不需要的资源，需要在html webpackkplugin选项里分别添加excludechunk s 3360['登录]和exclude chunk s 3360[' app ']；

以前的一些公共插件会导致错误，所以只剩下一个清单就删除公共插件。

添加登录相关文件

添加之前准备好的登录入口文件，类似app，但是去掉登录页面上不必要的东西，比如不用的组件和样式；

添加专用于登录条目的路由器配置文件，并删除其他路由，只留下一个登录页面：

仅保留登录路由

添加登录页面的html模板也会删除登录中没有使用的资源。

修改其他详细信息

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

删除登录；在原app路由中；

登录页面可以使用隐藏的iframe来预加载应用页面中的数据(猜测)。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。