bug收集：专门解决与收集bug的网站
网址：www.bugshouji.com
component: () => import(/* webpackchunkname: "home" */ '../views/home.vue')
今天为大家分享：
Vue 懒加载中的注释 webpackchunkname
webpackChunkName 介绍
webpackChunkName 是为预加载的文件取别名,作用就是webpack在打包的时候，对异步引入的库代码（lodash）进行代码分割时（需要配置webpack的SplitChunkPlugin插件），为分割后的代码块取得名字
import 异步加载的写法实现页面模块lazy loading 懒加载（Vue中的路由异步加载）：
Vue中运用import的懒加载语句以及webpack的魔法注释，在项目进行webpack打包的时候，对不同模块进行代码分割，在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。
代码语言：javascript复制const routes = [
{
path: '/',
name: 'home',
component: () => import(/* webpackchunkname: "home" */ '../views/home.vue')
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackchunkname: "about" */ '../views/about.vue')
},
{
path: '/login',
name: 'login',
component: () => import(/* webpackchunkname: "login" */ '../views/login.vue')
}
]动态设置的webpackChunkName
webpackChunkName: 新 chunk 的名称。从 webpack 2.6.0 开始，占位符 [index] 和 [request] 分别支持递增的数字或实际的解析文件名。
代码语言：javascript复制const routeoptions = [
{ path: '/', name: 'home' },
{ path: '/about', name: 'about' },
{ path: '/login', name: 'login' }
]
const routes = routeoptions.map(route => {
return {
...route,
component: () => import(/* webpackchunkname: "[request]" */ `../views/${route.name}.vue`)
}
})
const router = new vuerouter({
routes
})苟有恒 , 何必三更眠五更起
