vue中如何优化单页应用首屏加载速度（详细）-js教程-PHP中文网

首页

web前端

js教程

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

不言

Aug 27, 2018 am 10:39 AM

javascriptnginxvue.js

本篇文章给大家带来的内容是关于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="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, &#39;../&#39;),
  entry: {
    app: &#39;./src/main.js&#39;
  },
  externals:{
    &#39;vue&#39;: &#39;Vue&#39;,
    &#39;vue-router&#39;: &#39;VueRouter&#39;,
    &#39;vuex&#39;:&#39;Vuex&#39;,
    &#39;vue-resource&#39;: &#39;VueResource&#39;
  },
  ...
}

修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource

// import Vue from &#39;vue&#39;
// import VueResource from &#39;vue-resource&#39;
// Vue.use(VueResource)

路由懒加载

const workCircle = r => require.ensure([], () => r(require(&#39;@/module/work-circle/Index&#39;)), &#39;workCircle&#39;)
const workCircleList = r => require.ensure([], () => r(require(&#39;@/module/work-circle/page/List&#39;)), &#39;workCircleList&#39;)

将一些静态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: [&#39;js&#39;, &#39;css&#39;],

    // 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(&#39;compression-webpack-plugin&#39;)
  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: &#39;[path].gz[query]&#39;,
      algorithm: &#39;gzip&#39;,
      test: new RegExp(
        &#39;\\.(&#39; +
        config.build.productionGzipExtensions.join(&#39;|&#39;) +
        &#39;)$&#39;
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

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

相关推荐：

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

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

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

See all articles