什么vue路由懒加载 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue路由懒加载是一种优化技术，它可以延迟加载应用程序的某些模块，以提升应用程序的性能和加载速度。在传统的Vue项目中，所有的模块都会在应用程序初始化时一次性加载，而使用路由懒加载可以将路由对应的组件按需加载。下面是Vue路由懒加载的实现方式：

使用动态导入语法：在路由配置文件中，将组件的导入方式改为动态导入方式。例如，使用import()关键字来动态导入组件模块。
```
const Home = () => import('./components/Home.vue')
```

配置webpack的代码分割：默认情况下，webpack打包时将所有代码打包成一个bundle.js文件。为了实现路由懒加载，需要配置webpack的代码分割。可以通过splitChunks插件或者import()语法中的webpackChunkName来实现代码分割。

// webpack配置文件
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
  // ...
}

配置路由懒加载：在路由配置文件中，将组件对应的component字段改为使用import()动态导入模块的方式。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./components/Home.vue')
  },
  // ...
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

通过以上步骤，就可以实现Vue路由的懒加载。当路由路径匹配到对应的组件时，该组件才会被加载并渲染到页面中，从而减少了应用程序的初始加载时间，并提高了用户体验。通过优化路由加载，可以避免不必要的请求和渲染，提高应用程序的性能。

1年前 0条评论

worktile

Worktile官方账号

Vue路由懒加载是一种优化Vue.js项目性能的技术，通过将路由组件按需加载，可以减少首次加载的文件体积，提高页面加载速度和用户体验。下面是关于Vue路由懒加载的五点解释：

懒加载的概念：在传统的路由配置中，所有的路由组件在项目初始化时都会被加载进来，导致首次加载的页面体积较大。而在Vue中，我们可以通过懒加载的方式，将路由组件的加载推迟到实际需要使用它们的时候再去加载。
懒加载的使用方法：在Vue项目中使用懒加载的方法是通过使用import和component结合的方式，在路由配置中定义路由组件的时候将其替换为一个返回Promise的函数，然后通过Webpack的代码分割功能实现按需加载。
动态import语法：在懒加载中，我们使用了ES6的动态import语法，其允许我们将模块的导入延迟到调用时。这样在调用路由的时候，对应的模块才会被实际加载。
Webpack代码分割：Webpack是一个常用的打包工具，它提供了代码分割的功能，可以将项目中的代码按照模块的方式进行切割，实现代码按需加载。在使用Vue路由懒加载时，我们可以利用Webpack的代码分割功能，将路由组件进行分割，只在需要的时候加载。
延迟加载的好处：使用Vue路由懒加载可以带来多方面的好处。首先，它可以减少页面的初始加载时间，提升用户体验；其次，由于只加载当前页面需要的组件，可以减少项目的整体体积，提高网站的性能；此外，懒加载还可以实现按需加载，提供了更灵活的加载方式，使得项目可以更好地应对复杂的页面需求。

总之，使用Vue路由懒加载可以有效地优化项目的性能和用户体验，通过按需加载路由组件实现页面的分段加载，减少初始加载时间和文件体积，提高网站的加载速度和整体性能。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue路由懒加载是一种优化技术，它可以帮助我们在使用Vue.js开发单页应用时，减少初次加载页面时的资源消耗，提高页面加载速度。当浏览器访问一个Vue路由页面时，懒加载技术会在需要使用该页面的时候再加载对应的资源文件，而不是一次性加载所有页面的资源。

实现Vue路由懒加载的方法有两种：基于Webpack的动态import和基于Vue Router的异步组件。

基于Webpack的动态import

在webpack中，我们可以使用动态import语法来实现懒加载。首先，需要在每个Vue路由页面的component属性中，使用函数来返回一个import语句。

例如，我们有一个名为Home的组件，我们可以这样写：

const Home = () => import('./views/Home.vue');

然后，在Vue路由配置中，将这个组件作为路由的component属性的值：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 其他路由配置
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

这样，在访问首页时，会动态加载Home组件的资源文件。

基于Vue Router的异步组件

Vue Router也提供了异步组件的方式来实现懒加载。在路由配置中，我们使用component属性的resolve属性来指定一个返回Promise的函数，函数中通过import语句来异步加载对应的组件。

举个例子，我们可以这样写：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  },
  // 其他路由配置
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

同样，在访问首页时，会异步加载Home组件的资源文件。

无论是使用Webpack的动态import还是使用Vue Router的异步组件，都能实现Vue路由的懒加载，提高页面加载速度和性能。需要注意的是，使用懒加载时要确保项目的构建工具正确配置，并且需要考虑兼容性和代码分割等因素。

1年前 0条评论