工程化（Webpack / Vite ）

1.webpack 五大核心

entry入口、output打包输出、loader处理非JS文件、plugin插件、mode环境

• Loader：转换文件（css-loader、babel-loader、file-loader)，运行在文件编译阶段
• Plugin：整个打包周期钩子，扩展功能（html-webpack-plugin、clean-webpack-plugin)

2.Bable作用

将ES6+转ES5，兼容低版本浏览器core-js实现polyfill填充缺失API

3.Vite比Webpac快的原因

1. 开发环境基于ES Module，不用预打包，按需加载文件
2. webpack先打包全部文件再启动服务；Vite启动无打包过程
3. 使用esbuild预构建依赖，速度远超webpack
4. 热更新只更新修改模块，无需重编译整包

4.前端性能优化

加载优化

1. 打包分割：路由懒加载、分包splitChunks
2. 压缩代码：Terser压缩JS、css-minify压缩样式、gzip/brotli
3. 静态资源CDN、图片压缩（webp)、雪碧图
4. 缓存策略：强缓存Cache-Contrl、协商缓存ETag/Last-Modified
5. 去除无用代码

渲染优化

1. 减少DOM操作，虚拟DOM，文档碎片
2. 避免频繁回流重绘，使用transfrom
3. 图片懒加载，路由懒加载
4. 虚拟列表处理大量数据渲染

网络优化

1. 减少http请求，合并资源
2. 接口节流防抖、请求缓存
3. 跨域代理、接口分页

浏览器网络与安全

1.缓存机制

• 强缓存（不发请求）Cache-Control:max-age/Expires
• 协商缓存（发请求校验）Last-Modified + If-mOdified-Since ETag + If-None-Match

2.前端安全

XSS跨站脚本：输入过滤、转义、CSP、HttpOnlyCookie

CSRF跨站请求伪造：token验证、SameSite Cookie、验证码

点击劫持：X-Frame-Options

中间人攻击：全站HTTPS