四年经验武汉前端负责人面经

大家好，我是山月。这是我在 B 站的模拟面试，「可在左下角打开原文链接观看视频。」

今天面试的是武汉一位工作了四年的前端负责人，也是我在 Bilibili 的第十次模拟面试[1]

长按识别二维码查看原文 https://www.bilibili.com/video/BV13a411m7hs/

• graphql
  • https://www.apollographql.com/docs/apollo-server/performance/apq/
  • 好处 ✅
  • N+1 Query ❎ Dataloader
  • APQ 缓存
  • Optimistic UI ✅
• tailwindcss
  • purgecss: https://github.com/FullHuman/purgecss
  • uncss: https://github.com/uncss/uncss
  • 好处
  • 按需构建
• webpack-bundle-analyzer (next.js) -> https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts
  • js -> terser
  • css -> cssnano
  • gzip/brotli
  • webp
  • picture
  • width/height
  • 懒加载
  • Image Component -> next.js
  • imagemin-webpack-plugin (sharp)
  • https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
  • IntersectionObserver
  • loading.lazy
  • lazy/suspense
  • react/react-dom
  • lodash
  • echarts
  • split-chunks (http cache) -> next.js
  • 路由懒加载
  • image
  • prefetch -> import('') Webpack 魔法注释
  • compressWebpackPlugin
  • minify

{
  me {
    id
    phone @cache-control(max-age: 300)
    friends {
      id
      phone
    }
  }
}

大家好，我是山月。这是我在 B 站的模拟面试

参考资料

[1]

Bilibili 的第十次模拟面试:https://www.bilibili.com/video/BV13a411m7hs/