Vue按需加载

caspar 发布于2019-08-21 17:52 / 626人阅读

摘要：按需加载实现定义路由，每个路由映射一个组件。第一个参数是一个数组，表示所依赖的模块，例如，第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部使用这些模块。

概念（懒加载）

当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，嗯，这样就更加高效了。

场景

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

目的

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

实现

app.vue

router.js

import Vue from "vue"
import VueRouter from "vue-router"
import "babel-polyfill"
import {Promise} from "es6-promise-polyfill"
import App from "../components/app"

// 定义路由，每个路由映射一个组件。
const Routers = [
    {
        path: "/",   // 路径
        component: resolve => require(["../components/member/index], resolve)   // 异步加载组件
    },
    {
        path: "/login",
        component: resolve => require(["../components/member/login"], resolve)
    }
]

const RouterConfig = {
    routes: Routers
}
// 创建router实例，并传递路由配置。
const router = new VueRouter(RouterConfig);
// 创建并挂载根实例。
new Vue({
    el:"#app",
    router,
    // 将h作为createElement的别名是一个通用惯例。
    render: h =>(App)  
})

注意：

require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，例如["moduleA","moduleB"]，第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部使用这些模块。

示例代码中使用了异步的方式加载组件，其中require函数负责异步引入将要渲染的组件，而resolve则负责异步回调渲染组件。

babel-polyfill：对Promise进行转码编译；

npm install --save babel-polyfill

es6-promise-polyfill 解决Promise兼容性问题。关于不太了解Promise的同学请移步这里

npm install --save es6-promise-polyfill

如有错误，还请不吝指正。

GPU云服务器云服务器按需加载按需加载javascript webpack按需加载 Vue_Vue

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90128.html

vue的路由懒加载和组件的按需加载

摘要：懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。路由的懒加载按需加载的写法效果按需加载会在页面第一次请求的时候，把相关路由组件块的添加上非按需加载则会把所有的路由组件块的包打在一起。当业务包很大的时候建议用路由的按需加载懒加载。懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要...

Lucky_Boy 2019-08-21 16:50 评论0 收藏0
Vue组件库开发总结

摘要：组件库开发总结由于工作需要，最近在学习怎么开发一个组件库。按需打包的使用要使用按需打包，不仅组件库的打包需要做处理，项目中也需要做处理。 Vue组件库开发总结由于工作需要，最近在学习怎么开发一个Vue组件库。主要需要实现以下点：1.组件使用npm包引入2.实现按需引入及按需打包项目中许多实现是参考的element-ui，特别是webpack打包部分组织项目项目生成项目生成是直接...

longshengwang 2019-08-23 18:16 评论0 收藏0
vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的req

摘要：但是，这种情况下一个组件生成一个文件。提供的配置路由，使用的技术，也可以实现按需加载。这种情况下，多个路由指定相同的，会合并打包成一个文件。举例如下详细代码在仓库项目路由配置文件 1. vue异步组件技术 vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。但是，这种情况下一个组件生成一个js文件。举例如下： { path...

X_AirDu 2019-08-21 16:59 评论0 收藏0
实现element-ui的按需引入，按需打包加载

摘要：简单说明原理使用实现按需引入打包。这里采用多入口配置，实现各个功能模块分别打包成一个文件，并使用将样式进行抽离后，按入口进行打包为对应的文件。只要在指定入口名为。这个相关配置已经发布了包。简单说明原理：使用babel-plugin-component实现按需引入、打包。将webpack配置成多入口，保证最终打包的目录结构符合babel-plugin-component插件的要求，实...

TesterHome 2019-08-23 10:41 评论0 收藏0
webpack+vue项目实战（三，配置功能操作页和组件的按需加载）

摘要：但是实际上，回款管理和开票管理的组件文件也是加载了。所以下面引用按需加载来处理。是不是小很多了，然后和是按需加载的，就是需要的时候才加载。 1.前言上篇文章（webpack+vue项目实战（二，开发管理系统主页面）），实现了，侧边栏的一个操作，点击侧边栏的一些操作，最重要的就是路由的切换。看了上一篇的伙伴也不难发现，除了点击侧边栏‘首页’之外，点击其它的都是白色的一片。原因我想大家都...

endless_road 2019-08-20 17:46 评论0 收藏0