大厂面试题分享 面试题库
前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
背景
笔者在最近在公司接手了一个老的对内使用的项目，接手后体验了下 发现首屏加载比较慢。分析了下大概的原因是main.js挂载了太多了东西，没有开启gzip的话app.js有4.2M。
按照常规的思路就是把全局引入的东西手动去掉，可是手动这个项目设计到的页面太多了，纯人工来改的话涉及到很多人天的工作量，
问题
基于的代码我们可以明显的发现一些可以优化的小点点
- 项目在main.js中有全局引入业务组件（还有directives filters），但是业务组件不一定是在每个页面都使用
- 项目在main.js中有全局引入常量（还有utils）
这两个点在很多项目都会有，常规的思路是我们手动的一个组件一个组件的搜，然后修改。可是对于文件很多的老系统来说不太现实，需要大量的人去做这种事情。
思路
- 将所有的业务组件遍历出来生成一个
Map<componentName,componentPath> - 使用
glob库拿到所有的vuejs文件 - 定义2个方法
- 使用
vue-template-compiler解析模板 看一下当前页面是否使用公共业务组件，有的话放到一个数组内 - 使用
@babel/parser解析js生成ast - 解析 ast 看看是否引入 并且在components内注册，如果没有的话引入，并且注册
动手
首先我们把所需要的包安装一下,我们先操作单个文件，
pnpm i @babel/parser @babel/generator @babel/traverse @babel/types vue-template-compiler glob 复制代码
生成 Map<componentName,componentPath>
我们项目的业务组件还比较规范（如果实在不规范，其实手动维护一下这个Map也工作量不大)，src/common/components有2个文件夹 basic 是基础组件，business里面是基于基础组件生成的业务组件，当然代码库内的代码都是随便写的，只是为了展示如何做自动加载组件
这一部分代码比较简单，引入fs，然后遍历文件夹就可以了
/** * * @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 可以得出如下结果
解析vue文件
首先准备一个app.vue内容如下
<template> <div id="app"> <div id="nav"> <s-input /> <s-file /> </div> <router-view/> </div> </template> <script> export default { data () { return { } }, components: { } } </script> 复制代码
首先通过fs模块得到源码的内容 content
// 目标文件 const targetFile = path.resolve(__dirname, './App.vue') // 得到文件内容 const content = fs.readFileSync(targetFile).toString() 复制代码
然后编写一个方法解析html模板
/** * * @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) 复制代码
可以看到控制台输出
得到当前文件使用了哪些业务组件后，接下来就是解析js，然后动态的import进去并注册就好了
借助一个网站我们可以知道 直接import A from ‘b'中的A是 ImportDefaultSpecifier类型
通过看ast。我们可以得知一条import 语句是ImportDeclaration类型的，所以借助@babel/types 可以生成ImportDeclaration，
如何使用@babel/types 生成语句
我们使用 t 代表@babel/types
一个import 语句的type是ImportDeclaration 那么就调用 t.importDeclaration方法 看api文档可以得知 t.importDeclaration 方法第一个入参就是ImportDefaultSpecifier类型 ImportDefaultSpecifier 可以借助t.importDefaultSpecifier方法生成
在入口文件生成imort 语句
/** * * @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( /<script>([\s\S]+?)<\/script>/, `<script>\n${sc.code}\n</script>` ) ) 复制代码
生成的效果图如下，我们可以明显看到需要引入的s-file 和 s-input都引入进来了
那下一步就是判断export default 里面是否有 components 并注册 组件了
自动注册组件
看一下ast 想要构建一个components 我们需要 ObjectProperty 然后ObjectProperty的value是 ObjectExpressionObjectProperty的properties属性是 一个 ObjectProperty[]
所以我们可以得出全部的代码如以下链接
show一下成果
通过图片得知，我们当前的替换是成功了,简单版的业务业务组件自动导入就做好了
批量替换
这里批量替换笔者先不做，准备用一整篇文章来写，因为里面内容很多，也会因为一些人写代码的方式问题遇到非常多的问题和跳转
大厂面试题分享 面试题库
前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
