vue组件按需加载
in Vuejs with 0 comment

vue组件按需加载

in Vuejs with 0 comment

vue异步组件技术

vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。
但是,这种情况下一个组件生成一个js文件,举例如下:

        {
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: resolve => require(['../components/PromiseDemo'], resolve)
        }

es提案的import() (推荐使用这种方式)

此方式需要webpack > 2.4支持,参考 webpack官方文档:webpack中使用import(),vue官方文档:路由懒加载(使用import())
vue-router配置路由,代码如下:

// 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')
// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
    routes: [
        {
            path: '/importfuncdemo1',
            name: 'ImportFuncDemo1',
            component: ImportFuncDemo1
        },
        {
            path: '/importfuncdemo2',
            name: 'ImportFuncDemo2',
            component: ImportFuncDemo2
        }
    ]
})

webpack提供的require.ensure()

vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。
这种情况下,多个路由指定相同的chunkName(都指定是demo),会合并打包成一个js文件。举例如下:

        {
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
        },
        {
            path: '/hello',
            name: 'Hello',
            // component: Hello
            component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
        }

前面3种方式总体代码参考

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')

// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。
// const ImportFuncDemo1 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo1')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')

// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
    if (savedPosition) {
        // savedPosition is only available for popstate navigations.
        return savedPosition
    } else {
        const position = {}
        // new navigation.
        // scroll to anchor by returning the selector
        if (to.hash) {
            position.selector = to.hash
        }
        // check if any matched route config has meta that requires scrolling to top
        if (to.matched.some(m => m.meta.scrollToTop)) {
            // cords will be used if no selector is provided,
            // or if the selector didn't match any element.
            position.x = 0
            position.y = 0
        }
        // if the returned position is falsy or an empty object,
        // will retain current scroll position.
        return position
    }
}

export default new Router({
    mode: 'history',
    scrollBehavior,
    routes: [
        {
            path: '/',
            name: 'StoreDemo',
            // 使用vue的[异步组件](https://cn.vuejs.org/v2/guide/components.html#异步组件)技术,可以实现按需加载
            // 但是,这种情况下一个组件生成一个js文件
            component: resolve => require(['../components/StoreDemo'], resolve),
            // 配置了scrollToTop为true,点击这个路由,页面会滚到顶部
            // 如果没配置scrollToTop或配置scrollToTop为false,点击这个路由,页面保持原先的滚动位置
            // 效果说明:点击这个路由后,滚动页面隐藏顶部的一部分,再点击路由:/promisedemo,页面保持原先的滚动位置;再点击这个路由,页面会滚动到顶部,因为配置了scrollToTop为true
            meta: { scrollToTop: true }
        },
        {
            path: '/promisedemo',
            name: 'PromiseDemo',
            // 使用webpack的[require.ensure](https://doc.webpack-china.org/api/module-methods#require-ensure)技术,也可以实现按需加载。
            // 这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件;如果不指定chunkName,则和使用vue的异步组件一样,每个组件生产打包成一个js文件。
            // 这个组件PromiseDemo 和下面的 Hello 组件,指定了相同的chunkName(名字为:demo),因此会合并打包成一个js文件。
            component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
        },
        {
            path: '/hello',
            name: 'Hello',
            component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
        },
        {
            path: '/importfuncdemo1',
            name: 'ImportFuncDemo1',
            component: ImportFuncDemo1
        },
        {
            path: '/importfuncdemo2',
            name: 'ImportFuncDemo2',
            component: ImportFuncDemo2
        },
        {
            path: '/pluginsdemo',
            name: 'PluginsDemo',
            component: resolve => require.ensure([], () => resolve(require('../components/PluginsDemo')), 'PluginsDemo')
        }
    ]
})

参考文章

Responses