网站推广成功案例,wordpress 视频展示,企业门户网站建站,一件代发货源开网店货源1 . vue异步组件技术 异步加载
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件
/* vue异步组件技术 */
{ path: /home, name: home, component: resolve require([/components/home],resolve) },
{ path…1 . vue异步组件技术 异步加载
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件
/* vue异步组件技术 */
{ path: /home, name: home, component: resolve require([/components/home],resolve) },
{ path: /index, name: Index, component: resolve require([/components/index],resolve) },
{ path: /about, name: about, component: resolve require([/components/about],resolve) }
2.组件懒加载方案二 路由懒加载(使用import)
const 组件名() import(组件路径);
// 下面2行代码没有指定webpackChunkName每个组件打包成一个js文件。
/* const Home () import(/components/home)
const Index () import(/components/index)
const About () import(/components/about) */
// 下面2行代码指定了相同的webpackChunkName会合并打包成一个js文件。
把组件按组分块
const Home () import(/* webpackChunkName: ImportFuncDemo */ /components/home)
const Index () import(/* webpackChunkName: ImportFuncDemo */ /components/index)
const About () import(/* webpackChunkName: ImportFuncDemo */ /components/about){ path: /about, component: About }, { path: /index, component: Index }, { path: /home, component: Home }
3.webpack提供的require.ensure()
vue-router配置路由使用webpack的require.ensure技术也可以实现按需加载。
这种情况下多个路由指定相同的chunkName会合并打包成一个js文件。
/* 组件懒加载方案三: webpack提供的require.ensure() */
{ path: /home, name: home, component: r require.ensure([], () r(require(/components/home)), demo) },
{ path: /index, name: Index, component: r require.ensure([], () r(require(/components/index)), demo) },
{ path: /about, name: about, component: r require.ensure([], () r(require(/components/about)), demo-01) }// r就是resolve
const list r require.ensure([], () r(require(../components/list/list)), list);
// 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载
const router new Router({routes: [{path: /list/blog,component: list,name: blog}]
})
