【魔法注释】路由懒加载+webpackChunkName

9,547 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」      ,赢取创作大礼包,挑战创作激励金

webpackChunkName

之前在vue的路由配置文件中看到了 /* webpackChunkName:"lodash" */ 这个注释

clipboard.png

有什么用

在学习了webpack之后了解其做用,Webpack通过增加内联注释来告诉运行时,该有怎样的行为。通过向import中添加注释,我们可以执行诸如命名chunk或选择不同模式之类的操作。webpack在打包的时候,对异步引入的库代码(lodash)进行代码分割时(需要配置webpackSplitChunkPlugin插件),为分割后的代码块取得名字

clipboard.png

如何命名chunk的名称

/* webpackChunkName: "hello" */,意味着 [name] 等于hello。

import(/* webpackChunkName: "plugins/myModule" */
    './myModule.js')
    .then(myModule => {
        console.log(myModule.default);
    });

上面的代码就会按照下面的方式来写,打包出来的chunk文件将会出现在plugins文件夹下,名字叫myModule.a2d1d5d8e7d5d4d4d4se.chunk.js

路由懒加载(动态chunkName)

官网链接地址

import异步加载的写法实现页面模块lazy loading懒加载(Vue中的路由异步加载):

Vue中运用import的懒加载语句以及webpack的魔法注释,在项目进行webpack打包的时候,对不同模块进行代码分割,在首屏加载时,用到哪个模块再加载哪个模块,实现懒加载进行页面的优化。 路由懒加载作为性能优化的一种手段,它能让路由组件延迟加载。通常我们还会为延迟加载的路由添加“魔法注释”(webpackChunkName)来自定义包名,在打包时,该路由组件会被单独打包出来。

作用就是webpack在打包的时候,对异步引入的库代码(lodash)进行代码分割时(需要配置webpack的SplitChunkPlugin插件),为分割后的代码块取得名字

Vue中运用import的懒加载语句以及webpack的魔法注释,在项目进行webpack打包的时候,对不同模块进行代码分割,在首屏加载时,用到哪个模块再加载哪个模块,实现懒加载进行页面的优化。

手写的规格

let router = new Router({
  routes: [
    {
      path:'/login',
      name:'login',
      component: import(/* webpackChunkName: "login" */
                                   `@/views/login.vue`)
    },
    {
      path:'/index',
      name:'index',
      component: import(/* webpackChunkName: "index" */
                               `@/views/index.vue`)
    },
    {
      path:'/detail',
      name:'detail',
      component: import(/* webpackChunkName: "detail" */ 
                                  `@/views/detail.vue`)
    }
  ]
})

上面这种写法没问题,但仔细一看它们结构都是相似的,其中唯一不同的就是部分的页面名称而已,作为一名出色的ctrl+c/ctrl+v 开发者,我们要做到可以偷懒的时候就尽量偷懒,我们可以使用 map 循环来解决这种重复性的工作。

const routeOptions = [
  {
    path:'/login',
    name:'login',
  },
  {
    path:'/index',
    name:'index',
  },
  {
    path:'/detail',
    name:'detail',
  },
]

const routes = routeOptions.map(route => {
  if (!route.component) {
    route = {
      ...route,
      component: () => import(`@/views/${route.name}.vue`)
    }
  }
  return route
})

let router = new Router({
  routes
})

在书写更少代码的同时,我们也把“魔法注释”给牺牲掉了。总所周知,代码中没办法编写动态注释。这个问题很尴尬,难道就没有两全其美的办法了吗?

强大的 webpack 来救场了,从 webpack 2.6.0 开始,占位符 [index][request] 被支持为递增的数字或实际解析的文件名。我们可以这样使用“魔法注释”:

const routes = routeOptions.map(route => {
  if (!route.component) {
    route = {
      ...route,
      component: () => import(/* webpackChunkName: "[request]" */
                       `@/views/${route.name}.vue`)
    }
  }
  return route
})

使用[request]来告诉webpack,这里的值是根据后面传入的字符串来决定,本例中就是变量route.name的值