phase 5 part 2: vite 8, webpack 5, fe-testing-perf topics with verified examples
This commit is contained in:
Shikui Wang committed
1 parent
7b5cae7d24
commit
9eeb10aede
38 files changed
+1823
-37
No files matched your search
+468
-26
@@ -519,14 +519,16 @@
|
||||
"domain": "frontend",
|
||||
"title": "前端测试与性能",
|
||||
"index": "topics/frontend/fe-testing-perf/index.md",
|
||||
"lessons": 0,
|
||||
"scenarios": 0,
|
||||
"lessons": 2,
|
||||
"scenarios": 1,
|
||||
"interview_questions": {
|
||||
"基础": 0,
|
||||
"进阶": 0,
|
||||
"场景题": 0
|
||||
"基础": 3,
|
||||
"进阶": 3,
|
||||
"场景题": 2
|
||||
},
|
||||
"examples": []
|
||||
"examples": [
|
||||
"topics/frontend/fe-testing-perf/examples/search-box"
|
||||
]
|
||||
},
|
||||
{
|
||||
"stack": "react",
|
||||
@@ -581,14 +583,16 @@
|
||||
"domain": "frontend",
|
||||
"title": "Vite",
|
||||
"index": "topics/frontend/vite/index.md",
|
||||
"lessons": 0,
|
||||
"scenarios": 0,
|
||||
"lessons": 1,
|
||||
"scenarios": 1,
|
||||
"interview_questions": {
|
||||
"基础": 0,
|
||||
"进阶": 0,
|
||||
"场景题": 0
|
||||
"基础": 3,
|
||||
"进阶": 3,
|
||||
"场景题": 2
|
||||
},
|
||||
"examples": []
|
||||
"examples": [
|
||||
"topics/frontend/vite/examples/vite-config"
|
||||
]
|
||||
},
|
||||
{
|
||||
"stack": "vue",
|
||||
@@ -609,16 +613,18 @@
|
||||
{
|
||||
"stack": "webpack",
|
||||
"domain": "frontend",
|
||||
"title": "Webpack",
|
||||
"title": "webpack",
|
||||
"index": "topics/frontend/webpack/index.md",
|
||||
"lessons": 0,
|
||||
"scenarios": 0,
|
||||
"lessons": 1,
|
||||
"scenarios": 1,
|
||||
"interview_questions": {
|
||||
"基础": 0,
|
||||
"进阶": 0,
|
||||
"场景题": 0
|
||||
"基础": 3,
|
||||
"进阶": 3,
|
||||
"场景题": 2
|
||||
},
|
||||
"examples": []
|
||||
"examples": [
|
||||
"topics/frontend/webpack/examples/webpack-config"
|
||||
]
|
||||
},
|
||||
{
|
||||
"stack": "asyncio",
|
||||
@@ -5498,7 +5504,13 @@
|
||||
"stack": [
|
||||
"fe-testing-perf"
|
||||
],
|
||||
"tags": [],
|
||||
"tags": [
|
||||
"Vitest",
|
||||
"Testing Library",
|
||||
"Playwright",
|
||||
"Web Vitals",
|
||||
"性能优化"
|
||||
],
|
||||
"level": null,
|
||||
"prerequisites": [],
|
||||
"related": [],
|
||||
@@ -5508,7 +5520,173 @@
|
||||
],
|
||||
"order": null,
|
||||
"path": "topics/frontend/fe-testing-perf/index.md",
|
||||
"sections": []
|
||||
"sections": [
|
||||
"学习路线",
|
||||
"企业场景",
|
||||
"面试题",
|
||||
"示例代码",
|
||||
"在 16 周计划中",
|
||||
"官方资料"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "frontend.fe-testing-perf.interview",
|
||||
"title": "前端测试与性能面试题",
|
||||
"type": "interview",
|
||||
"domain": "frontend",
|
||||
"stack": [
|
||||
"fe-testing-perf"
|
||||
],
|
||||
"tags": [
|
||||
"测试",
|
||||
"性能优化",
|
||||
"Web Vitals",
|
||||
"面试"
|
||||
],
|
||||
"level": "intermediate",
|
||||
"prerequisites": [],
|
||||
"related": [
|
||||
"frontend.fe-testing-perf.testing",
|
||||
"frontend.fe-testing-perf.web-vitals"
|
||||
],
|
||||
"est_hours": null,
|
||||
"week": [
|
||||
7,
|
||||
16
|
||||
],
|
||||
"order": null,
|
||||
"path": "topics/frontend/fe-testing-perf/interview.md",
|
||||
"sections": [
|
||||
"基础",
|
||||
"进阶",
|
||||
"场景题"
|
||||
],
|
||||
"questions": {
|
||||
"基础": 3,
|
||||
"进阶": 3,
|
||||
"场景题": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "frontend.fe-testing-perf.scenario.perf-regression",
|
||||
"title": "性能治理：真实用户监控、定位慢页面、CI 性能预算和测试防回归",
|
||||
"type": "scenario",
|
||||
"domain": "frontend",
|
||||
"stack": [
|
||||
"fe-testing-perf",
|
||||
"cicd"
|
||||
],
|
||||
"tags": [
|
||||
"性能监控",
|
||||
"RUM",
|
||||
"Lighthouse CI",
|
||||
"性能预算",
|
||||
"回归测试",
|
||||
"INP"
|
||||
],
|
||||
"level": "intermediate",
|
||||
"prerequisites": [
|
||||
"frontend.fe-testing-perf.web-vitals",
|
||||
"frontend.fe-testing-perf.testing"
|
||||
],
|
||||
"related": [
|
||||
"frontend.fe-testing-perf.interview",
|
||||
"frontend.webpack.scenario.build-speed"
|
||||
],
|
||||
"est_hours": 2.5,
|
||||
"week": [
|
||||
7
|
||||
],
|
||||
"order": null,
|
||||
"path": "topics/frontend/fe-testing-perf/scenarios/perf-regression.md",
|
||||
"sections": [
|
||||
"业务背景与问题",
|
||||
"约束",
|
||||
"方案设计",
|
||||
"关键代码",
|
||||
"取舍",
|
||||
"易错点",
|
||||
"面试怎么讲"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "frontend.fe-testing-perf.testing",
|
||||
"title": "前端测试：Vitest 单元测试、Testing Library 组件测试、Playwright 端到端测试",
|
||||
"type": "lesson",
|
||||
"domain": "frontend",
|
||||
"stack": [
|
||||
"fe-testing-perf"
|
||||
],
|
||||
"tags": [
|
||||
"Vitest",
|
||||
"Testing Library",
|
||||
"Playwright",
|
||||
"假定时器",
|
||||
"Mock",
|
||||
"竞态",
|
||||
"测试金字塔"
|
||||
],
|
||||
"level": "intermediate",
|
||||
"prerequisites": [
|
||||
"frontend.react.hooks-rendering"
|
||||
],
|
||||
"related": [
|
||||
"frontend.fe-testing-perf.web-vitals",
|
||||
"frontend.fe-testing-perf.interview",
|
||||
"ai.ai-coding.verify-evidence"
|
||||
],
|
||||
"est_hours": 2.5,
|
||||
"week": [
|
||||
7
|
||||
],
|
||||
"order": 1,
|
||||
"path": "topics/frontend/fe-testing-perf/01-testing-pyramid.md",
|
||||
"sections": [
|
||||
"解释说明",
|
||||
"案例",
|
||||
"代码示例",
|
||||
"易错点",
|
||||
"面试常问"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "frontend.fe-testing-perf.web-vitals",
|
||||
"title": "前端性能：Core Web Vitals（LCP / INP / CLS）、长任务和优化清单",
|
||||
"type": "lesson",
|
||||
"domain": "frontend",
|
||||
"stack": [
|
||||
"fe-testing-perf"
|
||||
],
|
||||
"tags": [
|
||||
"性能优化",
|
||||
"Core Web Vitals",
|
||||
"LCP",
|
||||
"INP",
|
||||
"CLS",
|
||||
"长任务",
|
||||
"监控"
|
||||
],
|
||||
"level": "intermediate",
|
||||
"prerequisites": [
|
||||
"frontend.ssr.rendering-modes"
|
||||
],
|
||||
"related": [
|
||||
"frontend.fe-testing-perf.scenario.perf-regression",
|
||||
"frontend.webpack.scenario.build-speed"
|
||||
],
|
||||
"est_hours": 2.5,
|
||||
"week": [
|
||||
7
|
||||
],
|
||||
"order": 2,
|
||||
"path": "topics/frontend/fe-testing-perf/02-web-vitals.md",
|
||||
"sections": [
|
||||
"解释说明",
|
||||
"案例",
|
||||
"代码示例",
|
||||
"易错点",
|
||||
"面试常问"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "frontend.react.hooks-rendering",
|
||||
@@ -6016,6 +6194,48 @@
|
||||
"面试常问"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "frontend.vite.dev-build-config",
|
||||
"title": "Vite 8：开发服务器原理、Rolldown 构建、环境变量、代理（含 SSE）、插件和拆包",
|
||||
"type": "lesson",
|
||||
"domain": "frontend",
|
||||
"stack": [
|
||||
"vite"
|
||||
],
|
||||
"tags": [
|
||||
"Vite",
|
||||
"Rolldown",
|
||||
"ESM",
|
||||
"HMR",
|
||||
"环境变量",
|
||||
"代理",
|
||||
"插件",
|
||||
"虚拟模块",
|
||||
"拆包"
|
||||
],
|
||||
"level": "intermediate",
|
||||
"prerequisites": [
|
||||
"frontend.typescript.type-system"
|
||||
],
|
||||
"related": [
|
||||
"frontend.webpack.build-optimization",
|
||||
"frontend.vite.scenario.webpack-to-vite",
|
||||
"frontend.vite.interview"
|
||||
],
|
||||
"est_hours": 2.5,
|
||||
"week": [
|
||||
7
|
||||
],
|
||||
"order": 1,
|
||||
"path": "topics/frontend/vite/01-dev-build-config.md",
|
||||
"sections": [
|
||||
"解释说明",
|
||||
"案例",
|
||||
"代码示例",
|
||||
"易错点",
|
||||
"面试常问"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "frontend.vite.index",
|
||||
"title": "Vite",
|
||||
@@ -6024,7 +6244,11 @@
|
||||
"stack": [
|
||||
"vite"
|
||||
],
|
||||
"tags": [],
|
||||
"tags": [
|
||||
"Vite",
|
||||
"Rolldown",
|
||||
"构建工具"
|
||||
],
|
||||
"level": null,
|
||||
"prerequisites": [],
|
||||
"related": [],
|
||||
@@ -6034,7 +6258,94 @@
|
||||
],
|
||||
"order": null,
|
||||
"path": "topics/frontend/vite/index.md",
|
||||
"sections": []
|
||||
"sections": [
|
||||
"学习路线",
|
||||
"企业场景",
|
||||
"面试题",
|
||||
"示例代码",
|
||||
"在 16 周计划中",
|
||||
"官方资料"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "frontend.vite.interview",
|
||||
"title": "Vite 面试题",
|
||||
"type": "interview",
|
||||
"domain": "frontend",
|
||||
"stack": [
|
||||
"vite"
|
||||
],
|
||||
"tags": [
|
||||
"Vite",
|
||||
"Rolldown",
|
||||
"HMR",
|
||||
"插件",
|
||||
"面试"
|
||||
],
|
||||
"level": "intermediate",
|
||||
"prerequisites": [],
|
||||
"related": [
|
||||
"frontend.vite.dev-build-config",
|
||||
"frontend.webpack.interview"
|
||||
],
|
||||
"est_hours": null,
|
||||
"week": [
|
||||
7,
|
||||
16
|
||||
],
|
||||
"order": null,
|
||||
"path": "topics/frontend/vite/interview.md",
|
||||
"sections": [
|
||||
"基础",
|
||||
"进阶",
|
||||
"场景题"
|
||||
],
|
||||
"questions": {
|
||||
"基础": 3,
|
||||
"进阶": 3,
|
||||
"场景题": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "frontend.vite.scenario.webpack-to-vite",
|
||||
"title": "老项目从 webpack 迁移到 Vite：评估、步骤、风险和回滚",
|
||||
"type": "scenario",
|
||||
"domain": "frontend",
|
||||
"stack": [
|
||||
"vite",
|
||||
"webpack"
|
||||
],
|
||||
"tags": [
|
||||
"迁移",
|
||||
"构建工具",
|
||||
"CommonJS",
|
||||
"环境变量",
|
||||
"灰度"
|
||||
],
|
||||
"level": "intermediate",
|
||||
"prerequisites": [
|
||||
"frontend.vite.dev-build-config",
|
||||
"frontend.webpack.build-optimization"
|
||||
],
|
||||
"related": [
|
||||
"frontend.vite.interview",
|
||||
"frontend.webpack.interview"
|
||||
],
|
||||
"est_hours": 2,
|
||||
"week": [
|
||||
7
|
||||
],
|
||||
"order": null,
|
||||
"path": "topics/frontend/vite/scenarios/webpack-to-vite.md",
|
||||
"sections": [
|
||||
"业务背景与问题",
|
||||
"约束",
|
||||
"方案设计",
|
||||
"关键代码",
|
||||
"取舍",
|
||||
"易错点",
|
||||
"面试怎么讲"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "frontend.vue.index",
|
||||
@@ -6195,15 +6506,58 @@
|
||||
"面试怎么讲"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "frontend.webpack.build-optimization",
|
||||
"title": "webpack 5：loader 与 plugin、splitChunks、tree shaking、缓存、模块联邦",
|
||||
"type": "lesson",
|
||||
"domain": "frontend",
|
||||
"stack": [
|
||||
"webpack"
|
||||
],
|
||||
"tags": [
|
||||
"webpack",
|
||||
"loader",
|
||||
"plugin",
|
||||
"splitChunks",
|
||||
"tree shaking",
|
||||
"contenthash",
|
||||
"持久化缓存",
|
||||
"Module Federation"
|
||||
],
|
||||
"level": "intermediate",
|
||||
"prerequisites": [],
|
||||
"related": [
|
||||
"frontend.vite.dev-build-config",
|
||||
"frontend.webpack.scenario.build-speed",
|
||||
"frontend.webpack.interview"
|
||||
],
|
||||
"est_hours": 2.5,
|
||||
"week": [
|
||||
7
|
||||
],
|
||||
"order": 1,
|
||||
"path": "topics/frontend/webpack/01-build-optimization.md",
|
||||
"sections": [
|
||||
"解释说明",
|
||||
"案例",
|
||||
"代码示例",
|
||||
"易错点",
|
||||
"面试常问"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "frontend.webpack.index",
|
||||
"title": "Webpack",
|
||||
"title": "webpack",
|
||||
"type": "index",
|
||||
"domain": "frontend",
|
||||
"stack": [
|
||||
"webpack"
|
||||
],
|
||||
"tags": [],
|
||||
"tags": [
|
||||
"webpack",
|
||||
"构建工具",
|
||||
"性能优化"
|
||||
],
|
||||
"level": null,
|
||||
"prerequisites": [],
|
||||
"related": [],
|
||||
@@ -6213,7 +6567,95 @@
|
||||
],
|
||||
"order": null,
|
||||
"path": "topics/frontend/webpack/index.md",
|
||||
"sections": []
|
||||
"sections": [
|
||||
"学习路线",
|
||||
"企业场景",
|
||||
"面试题",
|
||||
"示例代码",
|
||||
"在 16 周计划中",
|
||||
"官方资料"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "frontend.webpack.interview",
|
||||
"title": "webpack 面试题",
|
||||
"type": "interview",
|
||||
"domain": "frontend",
|
||||
"stack": [
|
||||
"webpack"
|
||||
],
|
||||
"tags": [
|
||||
"webpack",
|
||||
"loader",
|
||||
"plugin",
|
||||
"tree shaking",
|
||||
"面试"
|
||||
],
|
||||
"level": "intermediate",
|
||||
"prerequisites": [],
|
||||
"related": [
|
||||
"frontend.webpack.build-optimization",
|
||||
"frontend.vite.interview"
|
||||
],
|
||||
"est_hours": null,
|
||||
"week": [
|
||||
7,
|
||||
16
|
||||
],
|
||||
"order": null,
|
||||
"path": "topics/frontend/webpack/interview.md",
|
||||
"sections": [
|
||||
"基础",
|
||||
"进阶",
|
||||
"场景题"
|
||||
],
|
||||
"questions": {
|
||||
"基础": 3,
|
||||
"进阶": 3,
|
||||
"场景题": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "frontend.webpack.scenario.build-speed",
|
||||
"title": "大型项目构建慢、包体积大：度量、优化和防退化",
|
||||
"type": "scenario",
|
||||
"domain": "frontend",
|
||||
"stack": [
|
||||
"webpack",
|
||||
"fe-testing-perf",
|
||||
"cicd"
|
||||
],
|
||||
"tags": [
|
||||
"构建速度",
|
||||
"包体积",
|
||||
"splitChunks",
|
||||
"持久化缓存",
|
||||
"体积预算",
|
||||
"CI"
|
||||
],
|
||||
"level": "intermediate",
|
||||
"prerequisites": [
|
||||
"frontend.webpack.build-optimization"
|
||||
],
|
||||
"related": [
|
||||
"frontend.webpack.interview",
|
||||
"frontend.vite.scenario.webpack-to-vite"
|
||||
],
|
||||
"est_hours": 2,
|
||||
"week": [
|
||||
7
|
||||
],
|
||||
"order": null,
|
||||
"path": "topics/frontend/webpack/scenarios/build-speed.md",
|
||||
"sections": [
|
||||
"业务背景与问题",
|
||||
"约束",
|
||||
"方案设计",
|
||||
"关键代码",
|
||||
"取舍",
|
||||
"易错点",
|
||||
"面试怎么讲"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "plan.index",
|
||||
|
||||
Reference in new issue
Block a user