--- theme: condensed-night-purple --- ### 背景笔者在最近在公司接手了一个老的对内使用的项目，接手后体验了下发现首屏加载比较慢。分析了下大概的原因是main.js挂载了太多了东西，没有开启gzip的话app.js有4.2M。按照常规的思路就是把全局引入的东西手动去掉，可是手动这个项目设计到的页面太多了，纯人工来改的话涉及到很多人天的工作量，我们这一次就不去做网上能搜得到的优化（譬如ui组件按需引入，gzip，cdn等）。我们公司的真实在内网环境，代码也在公司的标装机，所有真实的现场无法还原，故此，本文的代码都是我基于我们项目的代码做了一个[简单版本](https://github.com/vincentchenzq/babel-study/tree/feat/v1) ### 问题基于[简单版本](https://github.com/vincentchenzq/babel-study/tree/feat/v1)的代码我们可以明显的发现一些可以优化的小点点 + 项目在main.js中有全局引入业务组件（还有directives filters），但是业务组件不一定是在每个页面都使用 + 项目在main.js中有全局引入常量（还有utils）这两个点在很多项目都会有，常规的思路是我们手动的一个组件一个组件的搜，然后修改。可是对于文件很多的老系统来说不太现实，需要大量的人去做这种事情。 ### 思路 + 将所有的业务组件遍历出来生成一个`Map` + 使用`glob`库拿到所有的`vue` `js` 文件 + 定义2个方法 + 使用 `vue-template-compiler` 解析模板看一下当前页面是否使用公共业务组件，有的话放到一个数组内 + 使用`@babel/parser` 解析`js`生成`ast` + 解析 ast 看看是否引入并且在components内注册，如果没有的话引入，并且注册 ### 动手首先我们把所需要的包安装一下,我们先操作单个文件，文章相关的代码在[v2分支](https://github.com/vincentchenzq/babel-study/tree/feat/v2) [babel相关的内容可以看这里](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md) ```bash pnpm i @babel/parser @babel/generator @babel/traverse @babel/types vue-template-compiler glob ``` #### 生成 Map ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cdfa6e028746411299996dee9528e93b~tplv-k3u1fbpfcp-watermark.image?) 我们项目的业务组件还比较规范（如果实在不规范，其实手动维护一下这个Map也工作量不大)，src/common/components有2个文件夹 basic 是基础组件，business里面是基于基础组件生成的业务组件，当然代码库内的代码都是随便写的，只是为了展示如何做自动加载组件这一部分代码比较简单，引入fs，然后遍历文件夹就可以了 ```js /** * * @param {string} p 路径 */ function resolve (p) { return path.resolve(__dirname, '..', p) } // 所有组件的组件的名称和路径映射 const allComponentMaps = fs.readdirSync(resolve('src/common/components/basic')).reduce((prev, cur) => { // 我们项目不存在直接放外面的组件 if (!cur.includes('.')) { prev[cur] = `@/common/components/basic/${cur}` } return prev }, {}) fs.readdirSync(resolve('src/common/components/business')).reduce((prev, cur) => { // 我们项目不存在直接放外面的组件 if (!cur.includes('.')) { prev[cur] = `@/common/components/business/${cur}` } return prev }, allComponentMaps) console.log(allComponentMaps) ``` 用nodemon运行这个js 可以得出如下结果 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c10e7c9849fc45e38aa18369407f033e~tplv-k3u1fbpfcp-watermark.image?) #### 解析vue文件首先准备一个app.vue内容如下 ```html ``` 首先通过fs模块得到源码的内容 content ```js // 目标文件 const targetFile = path.resolve(__dirname, './App.vue') // 得到文件内容 const content = fs.readFileSync(targetFile).toString() ``` 然后编写一个方法解析html模板 ```js /** * * @param {t.node} node * @param {Set} result */ function parseHTML (node, result = new Set()) { if (allComponentList.some(item => item === node.tag)) { result.add(node.tag) } else { (node.children || []).forEach(element => { parseHTML(element, result) }) } return result } const result = parseHTML(compiler.compile(content).ast) ``` 可以看到控制台输出 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a006203730f477bb4176bd8c968abb7~tplv-k3u1fbpfcp-watermark.image?) 得到当前文件使用了哪些业务组件后，接下来就是解析js，然后动态的import进去并注册就好了借助[一个网站](https://astexplorer.net/)我们可以知道直接`import A from ‘b'`中的A是 `ImportDefaultSpecifier`类型 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1c8a626ffb84ffd9ed6f72c35d13ffc~tplv-k3u1fbpfcp-watermark.image?) 通过看ast。我们可以得知一条import 语句是ImportDeclaration类型的，所以借助`@babel/types` 可以生成ImportDeclaration， #### 如何使用@babel/types 生成语句 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c0848832ea8642189f59b81235ffb1f4~tplv-k3u1fbpfcp-watermark.image?) 我们使用 t 代表@babel/types 一个import 语句的type是ImportDeclaration 那么就调用 t.importDeclaration方法看api文档可以得知 t.importDeclaration 方法第一个入参就是ImportDefaultSpecifier类型 ImportDefaultSpecifier 可以借助t.importDefaultSpecifier方法生成 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7efc7b121e1440f8a12300eddb2e21e1~tplv-k3u1fbpfcp-watermark.image?) #### 在入口文件生成imort 语句 ```js /** * * @param {string} str * @returns */ function camelToStr (str) { return str.replace(/-([a-z])/g, function (all, letter) { return letter.toUpperCase() }) } // 将用到的业务组件，并且没有引入的引入一下 traverse(scriptAst, { Program (path, state) { const node = path.node const body = node.body tempRes.forEach(componentName => { const importDefaultSpecifier = t.importDefaultSpecifier(t.identifier(camelToStr(componentName))) const importDeclaration = t.importDeclaration( [ importDefaultSpecifier ], t.StringLiteral(allComponentMaps[componentName]) ) body.unshift(importDeclaration) }) } }) const sc = generator(scriptAst.program) // 先随便生成到一个地方做测试 fs.writeFileSync( './a.vue', content.replace( /` ) ) ``` 生成的效果图如下，我们可以明显看到需要引入的s-file 和 s-input都引入进来了 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff2a1c363fbd456bb04af603dd26d21b~tplv-k3u1fbpfcp-watermark.image?) 那下一步就是判断export default 里面是否有 components 并注册组件了 #### 自动注册组件看一下ast 想要构建一个`components` 我们需要 `ObjectProperty` 然后`ObjectProperty`的`value`是 `ObjectExpression` `ObjectProperty`的`properties`属性是一个 `ObjectProperty[]` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c751bc05402481594ae19dad0da4a09~tplv-k3u1fbpfcp-watermark.image?) 所以我们可以得出全部的代码如以下链接 https://github.com/vincentchenzq/babel-study/blob/feat/v2/scripts/autoImport.js #### show一下成果 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f42d35bcbd2c42218d4635f68661c56a~tplv-k3u1fbpfcp-watermark.image?) 通过图片得知，我们当前的替换是成功了,简单版的业务业务组件自动导入就做好了 ### 批量替换 #### 引入glob 首先我们引入 glob ```js const glob = require('glob') ``` 然后拿到项目中所有的.vue 文件 ```js const files = glob.sync(`${resolve('src')}/**/**.vue`, {}) ``` 最后将上一篇文章对单个文件的处理抽成一个main 方法 [具体代码](https://github.com/vincentchenzq/babel-study/commit/7aa54ab8210c158bc8b04aaff60a56778edca4e8#diff-63aa55ad165e15dbccb019e764370f42b673c9a519a211a1064e453b206c44bf) 最终将glob拿到的文件调用main方法 ```js files.forEach(main) ``` 跑一下`autoImport.js` 不出意外的话果然是出了一点意外 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed5f13c21f5441d5862646a22f4438d1~tplv-k3u1fbpfcp-watermark.image?) #### 开始填坑打开about.vue,可以看到原来项目中使用了jsx语法，我们babel解析的时候并没有去处理 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f256fefa9b6400ba574a19724a31e6d~tplv-k3u1fbpfcp-watermark.image?) 那么如何处理jsx呢，看定义文件可以看到@babel/parse有第二个参数，里面有一个plugins ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfffbe18b7b946dc861373eb1a527d56~tplv-k3u1fbpfcp-watermark.image?) 再看plugins的定义文件，我们 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/712b906ed638456498777366ba6f9e17~tplv-k3u1fbpfcp-watermark.image?) 所以我们修改一下解析ast的代码 ```js // 得到ast const scriptAst = parser.parse(scriptContent, { sourceType: 'module', // 此处按需引入你需要引入的plugin等 plugins: [ 'jsx' //解析jsx ] }) ``` 再次跑发现页面上，差不多都加上了，现在就是eslint 报错了， ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62dff9714c5844d18252e0e993c1d62a~tplv-k3u1fbpfcp-watermark.image?) eslint怎么解决呢，我们只需要跑的时候加上--fix就行了 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c2fac34ac384b5c864400f37b8eba44~tplv-k3u1fbpfcp-watermark.image?) 结果如下，这样eslint就可以了 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f1d6acc1d1c4ce6a5085ec8367576c9~tplv-k3u1fbpfcp-watermark.image?) 启动项目，发现还是报错了，这是为什么呢 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0613c2f46aa46c0bd620a8b2ada1637~tplv-k3u1fbpfcp-watermark.image?) 原来有一个.vue文件的jsx中也引入了公共组件 **首先我们就当所有的jsx使用组件都是s-uploader的方式而不是sUploader的方式** 那么就当遍历ast的时候如果jsx中使用了组件就把他名字改成驼峰，并且将结果放到tempRes中，这样剩下的逻辑就和在templete中使用是一样的方式 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0480ce00990246278200710238575790~tplv-k3u1fbpfcp-watermark.image?) 我们看一下结果，可以看到页面东西都加进去了 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c604495a30e436493dd48f14820309a~tplv-k3u1fbpfcp-watermark.image?) #### 不足还有唯一的不足就是这样加会有eslint错误，目前读者还没有想到有什么办法解决，除了加`// eslint-disable-next-line vue/no-unused-components` 本文的代码都在[v3](https://github.com/vincentchenzq/babel-study/tree/feat/v3)分支，有需要的朋友可以自己去看下代码