工程化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填充缺失API3.Vite比Webpac快的原因开发环境基于ES Module不用预打包按需加载文件webpack先打包全部文件再启动服务Vite启动无打包过程使用esbuild预构建依赖速度远超webpack热更新只更新修改模块无需重编译整包4.前端性能优化加载优化打包分割路由懒加载、分包splitChunks压缩代码Terser压缩JS、css-minify压缩样式、gzip/brotli静态资源CDN、图片压缩webp)、雪碧图缓存策略强缓存Cache-Contrl、协商缓存ETag/Last-Modified去除无用代码渲染优化减少DOM操作虚拟DOM文档碎片避免频繁回流重绘使用transfrom图片懒加载路由懒加载虚拟列表处理大量数据渲染网络优化减少http请求合并资源接口节流防抖、请求缓存跨域代理、接口分页浏览器网络与安全1.缓存机制强缓存不发请求Cache-Control:max-age/Expires协商缓存发请求校验Last-Modified If-mOdified-Since ETag If-None-Match2.前端安全XSS跨站脚本输入过滤、转义、CSP、HttpOnlyCookieCSRF跨站请求伪造token验证、SameSite Cookie、验证码点击劫持X-Frame-Options中间人攻击全站HTTPS