大厂面试题分享 面试题库
前端面试题库 （面试必备）
地址：前端面试题库
背景
笔者在最近在公司接手了一个老的对内使用的项目，接手后体验了下 发现首屏加载比较慢。分析了下大概的原因是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.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是 ObjectExpression ObjectProperty的properties属性是 一个 ObjectProperty[]
所以我们可以得出全部的代码如以下链接
show一下成果
通过图片得知，我们当前的替换是成功了,简单版的业务业务组件自动导入就做好了
批量替换
这里批量替换笔者先不做，准备用一整篇文章来写，因为里面内容很多，也会因为一些人写代码的方式问题遇到非常多的问题和跳转