你好,欢迎访问我的博客!登录
当前位置:首页 - 服务器问题 - 正文 SEO教程学习网

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

2019-05-24服务器问题seo学习网236°c
A+ A-
这篇文章主要介绍了浅谈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 }}					
				
  选择分享方式
未定义标签

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录