Vue中 webpackChunkName【魔法注释】

我心飞翔 分类:vue
Vue中 webpackChunkName【魔法注释】

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打包的时候,对不同模块进行代码分割,在首屏加载时,用到哪个模块再加载哪个模块,实现懒加载进行页面的优化。

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] 分别支持递增的数字或实际的解析文件名。

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
})

苟有恒 , 何必三更眠五更起

回复

我来回复
  • 暂无回复内容