首页 / VUE / vue中如何优化单页应用首屏加载速度（详细）

vue中如何优化单页应用首屏加载速度（详细）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue中如何优化单页应用首屏加载速度（详细），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3056字，纯文字阅读大概需要5分钟。

内容图文

本篇文章给大家带来的内容是关于vue中如何优化单页应用首屏加载速度（详细） ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

  1. 使用CDN资源,减小服务器带宽压力

  2. 路由懒加载

  3. 将一些静态js css放到其他地方（如OSS），减小服务器压力

  4. 按需加载三方资源，如iview,建议按需引入iview中的组件

  5. 使用nginx开启gzip减小网络传输的流量大小

  6. webpack开启gzip压缩

  7. 若首屏为登录页，可以做成多入口，登录页单独分离为一个入口

使用CDN资源,减小服务器带宽压力

在index.html中引入cdn资源

...
  <body>
    <p id="app">
    </p>
    <!-- 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
    })
  )
}

若首屏为登录页，可以做成多入口，登录页单独分离为一个入口

相关推荐：

Vue怎么使用CDN优化首屏加载的速度

js延迟加载思想和首屏延迟加载讲解

以上就是vue中如何优化单页应用首屏加载速度（详细）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的vue中如何优化单页应用首屏加载速度（详细）全部内容，希望文章能够帮你解决vue中如何优化单页应用首屏加载速度（详细）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/285036.html

来源：【匿名】