原标题：vue单页面优化，vue页面优化主要从哪些方面进行
导读：
Intro...
vue中如何优化单页应用首屏加载速度(详细)
本篇文章给大家带来的内容是关于vue中如何优化单页应用首屏加载速度（详细），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案
使用CDN资源,减小服务器带宽压力
路由懒加载
将一些静态js css放到其他地方（如OSS），减小服务器压力
按需加载三方资源，如iview,建议按需引入iview中的组件
使用nginx开启gzip减小网络传输的流量大小
webpack开启gzip压缩
若首屏为登录页，可以做成多入口，登录页单独分离为一个入口
使用CDN资源,减小服务器带宽压力在index.html中引入cdn资源
...
<body>
<p id="app">
</p>
<!-- built files will be auto injected-->
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></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 ****yzer report after build finishes:
// `npm run build--report`
// Set to `true` or `false` to always turn it on or off
bundle****yzerReport: 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
})
)
}若首屏为登录页，可以做成多入口，登录页单独分离为一个入口
Vue单页面如何做seo页面优化
1、服务端渲染
服务端渲染对于刚接触vue的新手来说，并不是那么友好，虽然已有官方SSR中文文档。但是对于一个已经开发完毕的vue项目去接SSR无论是从工作量还是技术角度来说，都是一种挑战。
2、预渲染方式
在构建时(buildtime)简单地生成针对特定路由的静态HTML文件。优点是设置预渲染更简单，并可以将您的前端作为一个完全静态的站点。如果您使用webpack，您可以使用prerender-spa-plugin轻松地添加预渲染。它已经被Vue应用程序广泛测试。
