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

程序员文章站 2022-06-23 23:22:41

单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案使用cdn资源,减小服务器带宽压力路由懒加载将一些静态js cs...

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

使用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官方文档

使用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配置文件，去掉其他路由，只留下登录页一个就好：

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

只留登录路由

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

修改其他细节

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

去除原来app路由中的login；

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

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

上一篇： 7、JavaScript总结——实现选项卡切换的效果

下一篇： Vue2实时监听表单变化的示例讲解

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

Vue SPA单页应用首屏优化实践