标签：否则 配置路由 col 方案 code size port 配置 技术
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
有如下三种方法:
1.vue异步组件
将异步组件和 webpack 的 code-splitting 功能一起配合使用
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件
1 /* vue异步组件技术 */ 2 { 3 path: ‘/home‘, 4 name: ‘home‘, 5 component: resolve => require([‘@/components/home‘],resolve) 6 },{ 7 path: ‘/index‘, 8 name: ‘Index‘, 9 component: resolve => require([‘@/components/index‘],resolve) 10 },{ 11 path: ‘/about‘, 12 name: ‘about‘, 13 component: resolve => require([‘@/components/about‘],resolve) 14 }
2.es提案的import()
1 { 2 path: ‘/home‘, 3 name: ‘Home‘, 4 component: () => import(‘@/views/home‘) 5 }, { 6 path: ‘/about‘, 7 name: ‘About‘, 8 component: () => import(‘@/views/about‘) 9 }
有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)
Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。
1 const Foo = () => import(/* webpackChunkName: "group-foo" */ ‘./Foo.vue‘) 2 const Bar = () => import(/* webpackChunkName: "group-foo" */ ‘./Bar.vue‘) 3 const Baz = () => import(/* webpackChunkName: "group-foo" */ ‘./Baz.vue‘)
注意：chunk name一定要加引号(单引号双引号都可以)否则webpack不能识别chunk name,会默认按[id]显示，打出来的包的名字会是 0.js,1.js……
3.webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件
1 /* 组件懒加载方案三: webpack提供的require.ensure() */ 2 { 3 path: ‘/home‘, 4 name: ‘home‘, 5 component: r => require.ensure([], () => r(require(‘@/components/home‘)), ‘demo‘) 6 }, { 7 path: ‘/index‘, 8 name: ‘Index‘, 9 component: r => require.ensure([], () => r(require(‘@/components/index‘)), ‘demo‘) 10 }, { 11 path: ‘/about‘, 12 name: ‘about‘, 13 component: r => require.ensure([], () => r(require(‘@/components/about‘)), ‘demo-01‘) 14 }
标签：否则 配置路由 col 方案 code size port 配置 技术
原文地址：https://www.cnblogs.com/---godzilla---/p/11546213.html
