大厂面试题分享面试题库

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

地址：前端面试题库

背景

笔者在最近在公司接手了一个老的对内使用的项目，接手后体验了下发现首屏加载比较慢。分析了下大概的原因是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都引入进来了