【工作实录】解决babel-plugin-dynamic-import-node引发的问题

解决babel-plugin-dynamic-import-node引发的问题

前言

我们项目中使用的是 vue-admin-template 的后台框架。在做页面权限控制的时候，使用的是router.addRoutes 进行菜单以及页面的按需加载。

产生的问题

问题一：import 表达式写法直接报错

表现：

/src/store/modules/permission.js做页面的权限处理，我们会使用如下的写法来做单个route的定义：

/src/store/modules/permission.js

const permissionInfo = {path: 'order/orderList', name: 'routeName', filePath: '/order/orderList'}
const route = {
  path: permissionInfo.path,
  name: permissionInfo.name,
  meta: {},
  component: () => import(`@/views${permissionInfo.filePath}.vue`)
}
1
2
3
4
5
6
7

但是使用该写法的时候，我们跳转order/orderList页面到会报如下的错误：

Error: Cannot find module '@/views/order/orderLis.vue'
  at webpackEmptyContext (eval at ./src/store/modules sync recursive (app.js:15452:1), <anonymous>:2:10)
  at eval (permission.js?31c2:152:1)
1
2
3

解决：

const permissionInfo = {path: 'order/orderList', name: 'routeName', filePath: '/order/orderList'}
const route = {
  path: permissionInfo.path,
  name: permissionInfo.name,
  meta: {},
-  component: () => import(`@/views${permissionInfo.filePath}.vue`)
+  component: resolve => require([`@/views${permissionInfo.filePath}.vue`], resolve)
}
1
2
3
4
5
6
7
8

打包分析图：

后续我这里都把vender的包隐藏掉进行展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jd6NfEhW-1661391487963)(/Users/zhangyixiong/Desktop/打包分析截图/require写法.png)]

从上图可以看出，有个views的chunk非常大。

问题二：有个超级大的chunk

表现：

在跳转到根据权限定义的route 的时候，页面加载的时间非常长

解决：

经过一个非常漫长的分析以及排查之后(血与泪啊)，目标确定到了是bable的转码的一个问题。这里是主要因为vue-admin-template中的babel配置中添加了一个babel-plugin-dynamic-import-node的插件，这个插件会不支持import表达式写法！！！而这个插件的作用是加快项目的编译速度。

做如下代码的调整：

/src/store/modules/permission.js

const permissionInfo = {path: 'order/orderList', name: 'routeName', filePath: '/order/orderList'}
const route = {
  path: permissionInfo.path,
  name: permissionInfo.name,
  meta: {},
- component: resolve => require([`@/views${permissionInfo.filePath}.vue`], resolve) 
+ component: () => import(`@/views${permissionInfo.filePath}.vue`)
}
1
2
3
4
5
6
7
8

babel.config.js

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
-   env: {
-     development: {
-     // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
-     // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
-     // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
-       plugins: ['dynamic-import-node']
-     }
-   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

参考文档：

https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/lazy-loading.html (vue-admin-template官方文档)

https://blog.csdn.net/weixin_42332641/article/details/107860527 （vue项目过大，编译速度慢的，下载dynamic-import-node插件）

打包分析图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IwU47Bfl-1661391487964)(/Users/zhangyixiong/Desktop/打包分析截图/import没有带魔法注释写法.png)]

从上图可以看出，那个非常大的chunk已经消失了。能够成功分包~~~

import表达式写法的拓展

魔法注释以及占位符

对于问题二的解决之后的分析图可以看出来，打包完的chunk的文件名称都是hash的文件名称，为了方便后续的打包分析。可以通过魔法注释以及占位符的方式进行chunk的文件名称的定义等等

优化：

/src/store/modules/permission.js

const permissionInfo = {path: 'order/orderList', name: 'routeName', filePath: '/order/orderList'}
const route = {
  path: permissionInfo.path,
  name: permissionInfo.name,
  meta: {},
- component: () => import(`@/views${permissionInfo.filePath}.vue`)
- component: () => import(/* webpackChunkName: "[request]"*/`@/views${permissionInfo.filePath}.vue`)
}
1
2
3
4
5
6
7
8

打包分析图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WduSPgyg-1661391487965)(/Users/zhangyixiong/Desktop/打包分析截图/魔法注释.png)]

这里我们可以看到，每个匹配到的chunk都带了一个具体匹配到的路径的一个文件名称前缀。

具体的魔法注释的使用可以查阅官方文档： https://webpack.docschina.org/api/module-methods/#dynamic-expressions-in-import