大厂面试题分享面试题库

前端面试题库（面试必备）推荐：★★★★★

地址：前端面试题库

背景

笔者在最近在公司接手了一个老的对内使用的项目，接手后体验了下发现首屏加载比较慢。分析了下大概的原因是main.js挂载了太多了东西，没有开启gzip的话app.js有4.2M。

按照常规的思路就是把全局引入的东西手动去掉，可是手动这个项目设计到的页面太多了，纯人工来改的话涉及到很多人天的工作量，

问题

基于的代码我们可以明显的发现一些可以优化的小点点

项目在main.js中有全局引入业务组件（还有directives filters），但是业务组件不一定是在每个页面都使用
项目在main.js中有全局引入常量（还有utils）

这两个点在很多项目都会有，常规的思路是我们手动的一个组件一个组件的搜，然后修改。可是对于文件很多的老系统来说不太现实，需要大量的人去做这种事情。

思路

将所有的业务组件遍历出来生成一个Map<componentName,componentPath>
使用glob库拿到所有的vue js 文件
定义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.nodeconst body = node.bodytempRes.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都引入进来了