vue 按需加载

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

问题

一个单页面应用，采用组件化的开发模式，没有采用懒加载，运用webpack打包，每次启动首页都会加载全部组件，但此时只是访问了首页而已，就造成了大量组件污染加载的情况。

需求

只在访问当前页面时加载对应组件，避免页面组件全部加载。

解决

我们可以通过实现路由懒加载和异步组件解决问题。

在项目中的具体实现

路由懒加载

在vue项目中使用路由懒加载非常简单，我们要做的就是把路由对应的组件定义成异步组件:

router.js

// 单独引入 import App from \'../App\'  // 其他路由异步加载 // require.ensure 是 Webpack 的特殊语法，用来设置 code-split point，实现代码分割 const home = r => require.ensure([], () => r(require(\'../page/home/home\')), \'home\') const city = r => require.ensure([], () => r(require(\'../page/city/city\')), \'city\')  export default [{     path: \'/\',     component: App, //顶层路由，对应index.html     children: [ //二级路由。对应App.vue         //地址为空时跳转home页面         {             path: \'\',             redirect: \'/home\'         },         //首页城市列表页         {             path: \'/home\',             component: home         },         //当前选择城市页         {             path: \'/city/:cityid\',             component: city             // or             //component: resolve => { require([\'../page/city/city\'], resolve); }         }     ] }]

注意

文档：webpack 如何使用 require.ensure() 进行代码拆分。

// require.ensure()语法： require.ensure(dependencies: String[], callback: function(require), chunkName: String)

require接收三个参数：

  • 第一个参数是一个数组，表示所依赖的模块，例如[\'moduleA\', \'moduleB\']
  • 第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用
  • chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称，我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。
    如上述例子中的home和city组件，分别被打包到两个chunk中，每个组件加载时都只会加载自己对应的代码，可以加快渲染速度！

main.js

最后，不要忘记在main.js将router引入。

import routes from \'./router/router\'

以上是 vue 按需加载 的全部内容， 来源链接： utcz.com/z/380530.html

回到顶部