前端工程化相关问题梳理（个人草稿-不推荐阅读）。

初始项目的配置优化问题

browserslist调整
- JS打补丁 @babel/preset-env
- CSS打补丁 @postcss-preset-evn
- 检测项目中是否使用了目标浏览器不支持的样式 stylelint-no-unsupported-browser-features

浏览器API需要单独手动补丁

js
// 方式 1：在入口文件（如 main.js）中全局引入（推荐配合 `@babel/preset-env` 的按需逻辑）
import 'whatwg-fetch'; // Fetch API 补丁（兼容 IE11 等）
import 'intersection-observer'; // IntersectionObserver 补丁
import '@ungap/mutation-observer'; // MutationObserver 补丁（兼容低版本 Safari）

// 方式 2: 使用 CDN 动态加载 Polyfill（适合非打包场景 / 多项目复用）

// <script src="https://polyfill.io/v3/polyfill.min.js?features=fetch,IntersectionObserver,MutationObserver"></script>


方案 3：能力检测 + 降级逻辑（无补丁时的兜底）
// Fetch API 降级为 XMLHttpRequest
function request(url) {
  if (window.fetch) {
    return fetch(url);
  } else {
    // 降级逻辑：用 XHR 实现
    return new Promise(/* ... */);
  }
}

// IntersectionObserver 降级为滚动监听
function initLazyLoad() {
  if (window.IntersectionObserver) {
    // 正常逻辑
    const observer = new IntersectionObserver((entries) => { /* ... */ });
  } else {
    // 降级：监听 scroll 事件 + 手动计算元素位置
    window.addEventListener('scroll', () => { /* ... */ });
  }
}

CSS Houdini 的兼容方案

检测 CSS Houdini Paint API 是否支持

js
// 
if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('custom-paint.js'); // 加载自定义 Paint 逻辑
} else {
  // 降级：使用普通 CSS 属性/伪元素实现同等效果
  document.documentElement.classList.add('no-houdini');
}

借助 PostCSS 插件降级（部分特性）

js
// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-preset-env')({
      browsers: 'extends browserslist-config-your-project', // 联动 browserslist
      features: {
        'css-properties-values-api': false, // 禁用未兼容的特性（或设为 "polyfill"）
        'custom-properties': true // 降级 CSS 变量（IE11 兼容）
      }
    })
  ]
};

集成stylelint-no-unsupported-browser-features

.stylelintrc.js

js
module.exports = {
  plugins: [
    'stylelint-no-unsupported-browser-features' // 引入插件
  ],
  rules: {
    // 配置兼容性检测规则
    'plugin/no-unsupported-browser-features': [
      true, // 开启检测（设为 "warning" 则只警告不报错）
      {
        // 关联 browserslist 配置（默认读取项目根目录的 browserslist）
        browsers: 'extends browserslist-config-my-project', // 也可直接写如 "> 1%, last 2 versions"
        severity: 'error', // 违规级别：error/warning
        ignore: ['flexbox'], // 忽略某些特性的检测（可选）
        ignorePartialSupport: false // 是否忽略「部分支持」的情况（默认 false，即部分支持也报错）
      }
    ]
  }
};

在构建工具中检测

webpack.config.js

js
const StylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  plugins: [
    new StylelintPlugin({
      // 要校验的文件范围
      files: ['src/**/*.{css,scss,less}'],
      // 校验失败时是否阻断构建（开发环境可设为 false，仅警告；生产环境建议设为 true）
      failOnError: process.env.NODE_ENV === 'production',
      // 输出详细的错误信息
      quiet: false,
      // 启用缓存（提升构建速度）
      cache: true
    })
  ]
};

方案 2：Webpack + webpack-bundle-analyzer + 兼容性扫描脚本（进阶）

代码规范、CICD、IDE插件

代码规范: .editorconfig, .prettier , .eslint, .stylelint, Typescript
自动化 CICD 单元测试（按需）, githubActions, commit提交规范
git hook --> husky
- commitlint 约束git提交代码时的注释规范
- lint-staged 按需校验
单元测试 jest vitest

vscode插件

EditorConfig 磨平编辑器书写格式差异
Prettier 代码风格问题
Eslint 代码质量问题，避免一些低级错误
Stylelint CSS代码质量、代码规范检查
- stylelint-no-unsupported-browser-features
- stylelint-webpack-plugin 在构建工具中提示错误
Compare Folders
es6-string-html
JavaScript (ES6) code snippets
liveServer
Color Picker
Tailwind CSS IntelliSense
GitLens
vue3语法插件 - Vue Language Features (Volar)
vue2 - Vetur

.vscode配置文件

浏览器插件

React Developer Tools
Angular DevTools
Vue.js devtools

编程思想--如何定义可维护性强的代码

高复用、低耦合，如何辨别？

可维护性强的代码核心特征是易理解、易修改、易扩展、易复用、易测试，需从设计原则、架构解耦、编程范式、工程化实践等多维度构建，具体可拆解为以下层面：

设计模式的五大原则

职责单一原则
开放封闭原则
李氏置换原则
接口独立原则
依赖倒置原则

微内核架构 - 发布订阅模式解耦

EventEmitter
Tapable

函数式编程

纯函数的定义
- 相同输入必返回相同输出 --幂等
- 无副作用 & 避免共享状态
不可变数据（Immutability）
高阶函数

模块化、组件化、分层设计
React思想

组件化
- 核心是将复杂 UI 拆分为独立、可复用、低耦合的最小单元（组件），每个组件只负责一件事（单一职责）。
- 声明式编程
单项数据流
- 父组件通过 props 将数据传递给子组件；
- 子组件不能直接修改父组件传递的 props（只读）；
不可变数据
状态驱动视图
副作用隔离
组件复合优于继承

为什么函数式编程对React非常重要？

可预测、可追溯
可随时中断渲染并重新开始
通过严格地将组件编写为纯函数，可以避免一整类令人困惑的错误和不可预测的行为。

微前端

微服务的定义

一种软件开发的架构和组织方式
将应用划分成一系列由明确API通信的小型独立的服务

微前端特点

独立开发部署
独立运行时
增量迭代
与技术栈无关
效率提升

微前端要考虑的点（具备哪些能力）

HTML入口
CSS隔离
JS 沙箱
按需加载
父子应用通信
公共资源加载

微前端的技术实现

路由拦截 hash路由和 history路由
html解析
CSS隔离
JS沙箱快照沙箱和Proxy沙箱

其它微前端有哪些解决方案

iframe
webcomponents
npm
webpack fedaration

编码时是否使用AI? deepseek, vscode插件？

项目优化

网络方面

使用HTTP2 or HTTP3
缓存
- 强缓存 or 协商缓存
- serviceWorker http缓存 diskCache
文件压缩、资源合并
CDN加速
强制开启 DNS 预解析（全局）

构建方面

TreeSharking useExports sideEffects
log移除、条件编译
按配置打包
代码分割
runtime方案

浏览器渲染

使用CSS动画代替JS动画
减少重排、重绘
合成层优化
减少DOM结构
CSS选择器优化
图片格式 .webp 雪碧图、字体

代码逻辑上

按需加载、预获取、预加载
- 路由懒加载
- 组件懒加载
- 图片懒加载
节流、防抖
虚拟列表
避免内存泄漏：
React性能优化

其他： SSR、预渲染、服务端组件