路由懒加载是一种优化技术,它是可以延迟加载应用程序的某些模块或者组件,而不是在初始加载时一次性加载所有内容,这样可以减少初始加载的文件体积,提高应用程序的加载速度
1.懒加载是在什么时候加载
路由懒加载是在用户访问相应的路由时才进行加载。它延迟加载路由组件,使得在初始加载时只加载必要的代码,而将其他路由的代码推迟到需要时再加载。
具体来说,在使用懒加载的情况下,当用户切换某个懒加载的路由时,浏览器会发送请求去获取该路由对应的javascript文件,一旦javascript文件加载完成,路由所需的组件将会被实例化病渲染到页面上
这种按需加载的方式有助于减少初始加载的文件体积,提升应用程序的初始加载速度。需要注意的是,路由懒加载需要配合构建工具(如Webpack)的支持来实现。构建工具会根据路由配置中的懒加载语法,将对应的路由组件拆分成独立的文件,然后在需要的时候加载
2.实现路由懒加载的方式
1.使用动态导入语法:在路由配置中,使用动态导入语法来指定需要懒加载的路由模块,使用import()函数来异步加载模块,返回一个promise对象
javascript
const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');
在上面的示例中,`Home` 和 `About` 组件将会被懒加载。当路由被访问时,对应的组件会在需要时按需加载。
2.配置Webpack的代码分割(Code Splitting):在使用 Vue CLI 创建的项目中,Webpack 已经默认配置了代码分割功能。Webpack 会根据动态导入的语法,将不同的模块或组件分割成多个独立的文件(chunk),并在需要时按需加载。这样可以确保只加载当前路由所需的模块,而不是整个应用程序的全部代码。
在打包构建时,Webpack 会生成多个包含不同模块的文件,每个文件对应一个路由或组件的懒加载。这些文件通常被命名为类似 chunk-[hash].js 的格式。
总之,路由的懒加载通过使用动态导入语法和Webpack的代码分割功能来实现。通过将路由对应的模块或组件拆分成多个独立的文件,可以实现按需加载,从而提高应用程序的加载性能。
3.懒加载中的chunkName是什么
在路由懒加载中,可以使用 chunkName(也称为 webpackChunkName)来为懒加载的路由组件指定一个名称。chunkName 是用于命名生成的懒加载文件的标识符。
通过指定 chunkName,可以更好地管理和识别生成的懒加载文件,特别是在开发环境和生产环境中。
以下是一个示例,展示了如何在路由懒加载中使用
javascript
const Home = () => import(/* webpackChunkName: "home" */ './components/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './components/About.vue');
在上面的示例中,通过注释的形式在动态导入语法中使用了 webpackChunkName。webpackChunkName 后面跟着一个字符串,用于指定懒加载文件的名称。
在构建过程中,Webpack 会根据 webpackChunkName 提供的名称为每个懒加载的组件生成对应的文件。例如,在上述示例中,会生成名为 home.js 和 about.js 的懒加载文件。
这样,通过为懒加载组件指定 chunkName,可以使生成的文件更可读和易于管理。在开发环境中,可以通过这些名称轻松识别所需的懒加载文件,而在生产环境中,可以根据 chunkName 进行代码分割和优化。
需要注意的是,chunkName 只是一个开发工具和构建工具使用的标识符,并不会在最终的应用程序中出现。它的主要目的是为了辅助开发和构建过程中的文件管理和优化。