vue首屏加载优化

原创

已于 2025-02-20 10:46:19 修改 · 421 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2021-03-10 17:04:52 首次发布

1.异步路由加载

import Vue from 'vue'
import Router from 'vue-router'
// 之前的方案
// import Index from '@/pages/index/'
// import ChooseUser from '@/pages/detail/chooseUser'
// 异步加载方案
const Index = r =>
  require.ensure([], () => r(require('@/pages/index')), 'Index')
const ChooseUser = r =>
  require.ensure([], () => r(require('@/pages/detail/chooseUser')),'ChooseUser')
Vue.use(Router)

export default new Router({
  // mode:'history',// 开发阶段开启
  routes: [
    {
      path: '/board/index/:id?',
      name: 'Index',
      component: Index
    },
    {
      path: '/board/chooseUser',
      name: 'ChooseUser',
      component: ChooseUser
    }
  ]
})

2.不打包库文件

spa首屏加载慢，主要是打包后的js文件过大，阻塞加载所致。那么如何减小js的体积呢？
那就是把库文件单独拿出来加载，不要参与打包。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=d

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mr_linjw

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vue的首屏加载优化

qq_56105902的博客

05-30

642

单页面应用的一个问题就是首页加载东西过多，加载时间过长。特别在移动端，单页面应用的首屏加载优化更第一步：webpack-bundle-analyzer 分析是绕不开的话题。接下来我会在以下几个方面为大家进行分析 ...

【Vue】首屏加载优化

qq_45677671的博客

03-12

1147

vue 首屏加载优化方案，面试高频

参与评论您还未登录，请先登录后发表或查看评论

Vue首屏加载速度优化方案

最新发布

qq_42526440的博客

06-12

861

使用 webpack-bundle-analyzer 或 rollup-plugin-visualizer 查看依赖分布，定位大文件。，即仅在需要时才从服务器加载。这种方法可以改善初始页面加载时间，因为应用程序会以更小的块加载，而不是在页面加载时加载所有组件。使用 terser-webpack-plugin 压缩 JS，cssnano 压缩 CSS。设置 Cache-Control: max-age=31536000（一年）用于静态资源。实现图片懒加载：使用 vue-lazyload 或。

vue项目首屏加载优化

weixin_43161112的博客

03-08

344

我们习惯用vue-cli搭建脚手架，再配合vue-router控制路由，vuex控制状态及复杂组件通讯，实现顺畅的spa应用，但是往往在项目应用插件框架时后首屏加载时间非常长。故此可做一些优化。

【vue 首屏加载优化】

前端-CV全粘工程师

10-04

556

使用 Vue SSR（服务端渲染）：SSR 可以将 Vue 组件在服务端直接渲染为 HTML，然后再将渲染结果发送到客户端，这样可以大大缩短首屏加载时间。Vue 首屏加载优化指的是通过一系列的技术手段，尽可能地缩短首屏（即页面中可见的部分）的加载时间，提高用户体验。配置 webpack 的代码分割：将代码按照不同的功能或页面进行分割，提高首屏加载速度。使用懒加载：将页面中的图片、视频等资源分割成多个部分，只有在用户需要访问的时候才加载。使用异步组件：将页面中的某些组件异步加载，可以降低首屏加载所需的时间。

Vue实战指南：Vue首屏优化，十二个提速建议

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

09-15

3748

通过上述提到的多种方法，我们可以显著提高Vue应用的首屏加载速度，进而提升用户体验。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。另外，持续集成（CI）流程中加入性能测试也是很有帮助的，这样可以在每次提交代码时自动检测性能变化，及时发现性能退化的问题。通过将代码拆分成多个小块，我们可以延迟加载非立即需要的部分，从而减小初次加载的文件大小。通过懒加载技术，只有当图片进入视口时才开始加载，可以减少初次加载的资源数量。

Vue首屏加载优化策略：按需加载与DllPlugin实践

"本文主要探讨了Vue首屏加载优化的策略，通过实例分析了优化前后的差异，并介绍了按需加载和基于DllPlugin与DllReferencePlugin的Webpack构建优化两种方法。" 在现代Web应用中，首屏加载速度对于用户体验至关重要，...

webpack 打包前端首屏加载

易之晓的博客

06-12

898

1.异步路由加载 import Vue from 'vue' import Router from 'vue-router' // 之前的方案 // import Index from '@/pages/index/' // import ChooseUser from '@/pages/detail/chooseUser' // 异步加载方案 const Index = r => require.ensure([], () => r(require('@/pages/index'.

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

10-18

主要介绍了浅谈VUE单页应用首屏加载速度优化方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

VUE首屏加载优化

ZengYue_D的博客

01-13

1640

1、打包压缩优化，实测初始化加载 17000ms => 3800ms 这个优化是两方面的，前端将文件打包成 .gz 文件，然后通过 nginx 的配置，让浏览器直接解析 .gz 文件。 1.先引入 compression-webpack-plugin 打包插件，注意版本，高版本可能会报错： tapPromise of undefined 。 npm install --save-dev compression-webpack-plugin@5.0.1 2.vue.confi

Vue首屏加载优化

qq_32998753的博客

03-13

2981

Vue首屏加载优化，打包优化：移除preload与prefetch、开启gzip压缩、公共代码抽离、CDN替换依赖包引入、移除无用文件，路由优化：动态路由，按需加载，动态添加路由

VUE 首屏加载优化

qq_23018459的博客

08-17

739

https://segmentfault.com/a/1190000010042512

VUE 用户体验-首屏加载优化

holmehai的博客

09-11

840

单页应用普遍存在一个问题，首屏加载的数据较大，因此时间上会稍长，可以从以下三个方面着手优化。 1、引入在线资源替代依赖包在index.html使用cdn引入部分资源，例： <body > <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="...

Vue的首屏加载优化方案

qq_41308489的博客

01-19

1365

优化方案使用CDN资源，减少打包体积，提高速度。路由懒加载把静态资源也放在CDN 第三方组件库UI框架，使用按需引入（Tree Shaking） nginx开启gzip打包压缩方案一这里我们要实践的是使用CDN资源，减少包体积，提高首屏加载速度。（1）用webpack的一个插件: webpack-bundle-analyzer辅助我们分析。（2）首先我们全局引用包。（3）在vue.config.js配置去除引用的第三方包。（4）使用第三方CDN资源引入。优化前和优化后的差别