【前端工程化 & 性能优化】面试题

网站性能优化都有哪些点
发布NPM包
代码压缩
首屏时间
前端项目中资源的缓存配置策略
加速npm install
npm i 与 npm ci 的区别是什么
package-lock.json 有什么作用
前端多分支部署
图片防盗链原理是什么
如何查看 node_modules(某一文件夹) 的体积有多大
optionalDependencies 的使用场景是什么
在 nginx 中如何配置负载均衡
前端打包时 cjs、es、umd 模块有何不同
JWT的原理
ssr
如何确认你们项目是否依赖某一个依赖项
npm workspaces 解决了什么问题
如何为一个项目指定 node 版本号
package.json 中 main/module/browser/exports 字段有何区别
npm publish 时 npm script 的生命周期
引入BFF层的优势
如何压缩前端项目中 JS 的体积
如何禁止打开浏览器控制台
core-js
如何处理白屏错误页的监控的
git hooks原理
如何检测出你们安装的依赖是否安全
请简述下 eslint 的作用
如何平滑升级 npm 包
npm 第三方库需要提交 lockfile 吗
docker部署前端
pnpm 有什么优势
浏览器中如何使用原生的 ESM
什么是AST，及其作用
简述 browserslist 的意义
简述 npm cache
如何修复某个 npm 包的紧急 bug
前端如何进行高效的分包
在 babel 编译为低版本 ES 时，为何能够编译可选链之类语法，但无法编译 API
webpack 中的 loader 的作用是什么
webpack 中plugin的作用是什么
webpack 中什么是 HMR，原理是什么
使用 webpack 打包时，如何更好地利用 long term cache
Tree Shaking 的原理是什么
vue-loader 的实现原理是什么
对于已经 import 但未实际使用的模块使用 webpack 还会对它打包吗
webpack 的 runtime 做了什么事情
webpack 中的 code spliting 是如何动态加载 chunk 的
打包器(webpack/rollup) 如何将打包后的 js 资源注入 html 中
打包器(webpack/rollup) 如何加载 style 样式资源

网站性能优化都有哪些点

发布NPM包

代码压缩

performance API 中什么指标可以衡量首屏时间

现在推荐用observer来获取具体的时间，之前的timing不推荐了 https://juejin.cn/post/7035647196510814221#heading-9

前端项目中资源的缓存配置策略

html设置协商缓存
静态资源 hash + 强缓存
缓存策略可以在nginx中配置，

加速npm install

npm i 与 npm ci 的区别是什么

package-lock.json 有什么作用

前端多分支部署

https://juejin.cn/post/7024377762940977160

图片防盗链原理是什么

请求头中的 refer 来判断是否屏蔽图片

如何查看 node_modules(某一文件夹) 的体积有多大

optionalDependencies 的使用场景是什么

在 nginx 中如何配置负载均衡

前端打包时 cjs、es、umd 模块有何不同

JWT的原理

ssr

如何确认你们项目是否依赖某一个依赖项

yarn list | grep xxx

npm workspaces 解决了什么问题

多个包难以互相链接，也是多包的一个方案

如何为一个项目指定 node 版本号

package.json 中 main/module/browser/exports 字段有何区别

npm publish 时 npm script 的生命周期

可以使用postinstall 来执行安装之后做的事情，例如patch-package

引入BFF层的优势

如何压缩前端项目中 JS 的体积

如何禁止打开浏览器控制台

https://github.com/AEPKILL/devtools-detector

core-js

如何处理白屏错误页的监控的？

git hooks原理

如何检测出你们安装的依赖是否安全

请简述下 eslint 的作用

如何平滑升级 npm 包

npm 第三方库需要提交 lockfile 吗

docker部署前端

pnpm 有什么优势

浏览器中如何使用原生的 ESM

什么是AST，及其作用

简述 browserslist 的意义

简述 npm cache

如何修复某个 npm 包的紧急 bug

前端如何进行高效的分包

在 babel 编译为低版本 ES 时，为何能够编译可选链之类语法，但无法编译 API

webpack 中的 loader 的作用是什么

webpack 中plugin的作用是什么

webpack 中什么是 HMR，原理是什么

使用 webpack 打包时，如何更好地利用 long term cache

Tree Shaking 的原理是什么

vue-loader 的实现原理是什么

对于已经 import 但未实际使用的模块使用 webpack 还会对它打包吗

webpack 的 runtime 做了什么事情

webpack 中的 code spliting 是如何动态加载 chunk 的

打包器(webpack/rollup) 如何将打包后的 js 资源注入 html 中

打包器(webpack/rollup) 如何加载 style 样式资源

Henry-Diasa / awesome_interview_question

【前端工程化 & 性能优化】面试题 #505

网站性能优化都有哪些点

发布NPM包

代码压缩

performance API 中什么指标可以衡量首屏时间

前端项目中资源的缓存配置策略

加速npm install

npm i 与 npm ci 的区别是什么

package-lock.json 有什么作用

前端多分支部署

图片防盗链原理是什么

如何查看 node_modules(某一文件夹) 的体积有多大

optionalDependencies 的使用场景是什么

在 nginx 中如何配置负载均衡

前端打包时 cjs、es、umd 模块有何不同

JWT的原理

ssr

如何确认你们项目是否依赖某一个依赖项

npm workspaces 解决了什么问题

如何为一个项目指定 node 版本号

package.json 中 main/module/browser/exports 字段有何区别

npm publish 时 npm script 的生命周期

引入BFF层的优势

如何压缩前端项目中 JS 的体积

如何禁止打开浏览器控制台

core-js

如何处理白屏错误页的监控的？

git hooks原理

如何检测出你们安装的依赖是否安全

请简述下 eslint 的作用

如何平滑升级 npm 包

npm 第三方库需要提交 lockfile 吗

docker部署前端

pnpm 有什么优势

浏览器中如何使用原生的 ESM

什么是AST，及其作用

简述 browserslist 的意义

简述 npm cache

如何修复某个 npm 包的紧急 bug

前端如何进行高效的分包

在 babel 编译为低版本 ES 时，为何能够编译可选链之类语法，但无法编译 API

webpack 中的 loader 的作用是什么

webpack 中plugin的作用是什么

webpack 中什么是 HMR，原理是什么

使用 webpack 打包时，如何更好地利用 long term cache

Tree Shaking 的原理是什么

vue-loader 的实现原理是什么

对于已经 import 但未实际使用的模块使用 webpack 还会对它打包吗

webpack 的 runtime 做了什么事情

webpack 中的 code spliting 是如何动态加载 chunk 的

打包器(webpack/rollup) 如何将打包后的 js 资源注入 html 中

打包器(webpack/rollup) 如何加载 style 样式资源