Amane

为什么需要前端构建工具 前端模块化 提供一个统一的模块方案 兼容不同的模块规范 语法转译 高级语法转译。如果 sass、TypeScript 资源加载，如图片、字体、worker 产物质量 产物压缩、

为什么要学习 Webapck 理解前端“工程化”的概念工具、目标。 一个团队总要有那么几个人熟悉 Webpack，某种程度上可以称为个人的核心竞争力。 高阶前端的必经之路。 什么是 Webapck 在

使用 TypeScript 可以让我们的代码变得更加安全，同时 IDE 也更容易能给出类型提示与语法提示，提升开发体验与开发效率。那么要怎么在 Express 中整合 TypeScript 呢？ 安装

Node.js 的应用场景 前端工程化 如打包工具（Bundle）：webpack、vite、esbuild、parcel 压缩工具（Uglify）：uglifyjs 转译工具（Transpile）：

响应式编程设计 UI 编程的痛点 当状态更新的时候，UI 不会自动更新，需要手动地调用 DOM 更新 UI。 欠缺基本的代码层面的封装和隔离吗，代码层面没有组件化。 UI 之间的数据依赖关系，需要手动

JavaScript 异常 页面中的所有 JavaScript 异常都会被发送到 window.onerror 这个事件上面。除了可以获取到 error 对象，还可以拿到发生异常的 url、行数、列数

Why TypeScript 静态类型 可读性增强：基于语法解析 TSDoc、IDE 增强。 可维护性增强：在编译阶段暴露大部分错误。在多人合作的大型项目中，获得更好的稳定性和开发效率。 是 JS 的

Chrome Dev Tools 在页面上右键并点击检查或者按 F12 可以打开 Chrome Dev Tools。 Element 在 Element 选项可以看到当前页面的 DOM 结构，可以在这

前端开发中我们有很多的性能指标如 FP、FCP、LCP 等，可以用于评判我们的前端页面的性能与用户体验好坏，本文就来简单介绍这些性能指标以及如何通过 performance 等浏览器 API 获取这些