美文网首页Vue2
vue项目实现按需加载的3种方式:vue异步组件技术、es提案的

vue项目实现按需加载的3种方式:vue异步组件技术、es提案的

作者: 山水一程2050 | 来源:发表于2017-09-27 11:31 被阅读93次

    1. vue异步组件技术

    • vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。
      但是,这种情况下一个组件生成一个js文件。
      举例如下:
            {
                path: '/promisedemo',
                name: 'PromiseDemo',
                component: resolve => require(['../components/PromiseDemo'], resolve)
            }
    

    2. es提案的import()

    // 下面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
            }
        ]
    })
    

    3. webpack提供的require.ensure()

    • vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。
      这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
      举例如下:
            {
                path: '/promisedemo',
                name: 'PromiseDemo',
                component: r => require.ensure([], () => r(require('../components/PromiseDemo')), 'demo')
            },
            {
                path: '/hello',
                name: 'Hello',
                // component: Hello
                component: r => require.ensure([], () => r(require('../components/Hello')), 'demo')
            }
    

    相关文章

      网友评论

        本文标题:vue项目实现按需加载的3种方式:vue异步组件技术、es提案的

        本文链接:https://www.haomeiwen.com/subject/fnzyextx.html