vue addeventlistener_vue项目实现按需加载的3种方式

最新推荐文章于 2024-05-16 14:23:07 发布

weixin_39903176

最新推荐文章于 2024-05-16 14:23:07 发布

阅读量614

点赞数

文章标签： vue addeventlistener

1. vue异步组件技术

vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。

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

es6提案的import()

推荐使用这种方式(需要webpack > 2.4)

如果您使用的是 Babel，你将需要添加syntax-dynamic-import插件，才能使 Babel 可以正确地解析语法。

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

需要注意的是，import()会返回一个Promise对象。

我们可以这样使用

btn.addEventListener('click', e => {
  import('/components/chart').then(mod => {
       someOperate(mod);
   }).catch(err ＝> {
       console.log('failed');
   });
});