浅谈VUE单页应用首屏加载速度优化方案
单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案
- 使用CDN资源,减小服务器带宽压力
- 路由懒加载
- 将一些静态js css放到其他地方（如OSS），减小服务器压力
- 按需加载三方资源，如iview,建议按需引入iview中的组件
- 使用nginx开启gzip减小网络传输的流量大小
- webpack开启gzip压缩
- 若首屏为登录页，可以做成多入口，登录页单独分离为一个入口
使用CDN资源,减小服务器带宽压力
在index.html中引入cdn资源
... <body> <div id="app"> </div> <!-- built files will be auto injected --> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> </body> ...
修改 build/webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex',
'vue-resource': 'VueResource'
},
...
}
修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource
// import Vue from 'vue' // import VueResource from 'vue-resource' // Vue.use(VueResource)
路由懒加载
const workCircle = r => require.ensure([], () => r(require('@/module/work-circle/Index')), 'workCircle')
const workCircleList = r => require.ensure([], () => r(require('@/module/work-circle/page/List')), 'workCircleList')
将一些静态js css放到其他地方（如OSS），减小服务器压力
注意这里的js文件，需要将结果抛出，然后在需要用到该js的组件中import引入
按需加载三方资源，如iview,建议按需引入iview中的组件
按需引用请查看iview官方文档iview
使用nginx开启gzip减小网络传输的流量大小
配置nginx，可以参考Nginx开启Gzip压缩大幅提高页面加载速度
webpack开启gzip压缩
这里需要配合Nginx服务器，Nginx开启gzip
config/index.js中
module.exports = {
build: {
...
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true, // 就是这里开启gzip,vue-cli搭建项目，这里默认为false
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
build/webpack.prod.conf.js中
使用vue-cli构建项目时，默认会有这段代码
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
若首屏为登录页，可以做成多入口，登录页单独分离为一个入口
修改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页面中的数据（猜想）。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue.js 合bootstrap实现分页控件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue实现表单未编辑或未保存离开弹窗提示功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
Vue 路由组件向app.vue主文件传值的方式(两种常见方式)
在Vue.js中,可以使用路由传参的方式向App.vue主页面传递数据,有多种方法可以实现这一目标,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
Vue echarts 实现离线中国地图的示例代码(细化到省份)
这篇文章主要介绍了Vue echarts 实现离线中国地图,细化到省份,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue如何局部修改Element样式，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了解决vant中 tab栏遇到的坑 van-tabs，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了Vue常用API、高级API的相关总结，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
一步一步学Vue，这篇文章为大家分享了第一篇前端主流框架vue学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue+springboot图片上传和显示的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
最新评论