DDR爱好者之家

浅谈VUE单页应用首屏加载速度优化方案
站长资源 2024/11/26 佚名
31 1538
DDR爱好者之家 Design By 杰米

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

  • 使用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="/UploadFiles/2021-04-02/vue.min.js">


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


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


只留登录路由




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


修改其他细节




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


去除原来app路由中的login；


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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米