website·Indexed 31 days ago
https://blog.yinuosnowball.top/A comprehensive collection of technical notes and guides covering frontend engineering. Key topics include deep dives into Webpack (basic, advanced, and custom loader/plugin implementation), TypeScript fundamentals, design patterns (creational, structural, and behavioral), sorting algorithms, HTTP status codes, browser caching, and mobile development concepts. It also provides practical setup guides for React and Vue CLIs, as well as tool configurations for Prettier and VS Code.
.editorconfig) and editor plugins that read these files to override the editor's local settings, ensuring all team members use the same formatting regardless of their tool choice.Object-Oriented Programming (OOP) is built upon three primary characteristics:
Tapable, a core library that defines the hook types. Plugins register tasks to these hooks, allowing them to modify resources or change the build behavior at specific stages of the production line.@functionName syntax and can be used to decorate four specific types of targets: classes, class properties, class methods, and property accessors.Modern frontend frameworks rely heavily on specific algorithms and data structures for performance and architecture:
KeepAlive component utilize linked lists and LRU (Least Recently Used) caches respectively.Build tools are necessary to transform modern development code into a format that browsers can execute. They perform the following critical tasks:
To optimize performance and reduce server load, separate resources into dynamic and static categories:
Cache-Control: private no-cache) to ensure users always retrieve the latest version.CDN Configuration Recommendations:
Cache-Control: max-age=31536000.TypeScript provides several fundamental and special types:
number, string, boolean: Standard primitive types.any: Can be assigned any value and assigned to any other type (except never).unknown: A type-safe alternative to any. A value of type unknown cannot be assigned to other types (except any) without a type assertion or type guard.void: Used for functions that do not return a value. It can be assigned undefined.never: Represents values that will never occur (e.g., a function that always throws an error or has an infinite loop). It is a subtype of every type.undefined and null: Specific types for missing or null values.let num: number = 123;
let s: string = '123';
let b: boolean = false;
// unknown requires type assertion or check
function div(params: unknown) {
return (params as number) / 2;
}
// void for no return value
function wel(): void {
console.log(123);
}
// never for functions that never return
function fn(msg: string): never {
while(true) { console.log(msg); }
}# Example Jenkins steps
yarn install --registry=https://registry.npm.taobao.org
yarn build:prod # Build production bundle
yarn oss --config alioss.production.js # Upload static assets to OSS first
tar -zcvf dist.tar.gz dist # Package for ECS deployment (index.html)