企业官网建设流程全解析

网站导航条制作,网站有必要使用伪静态么,2022智慧树互联网与营销创新,html5手机网站返回顶部累计产出120 加个组件#xff0c;为什么要封装这么多组件#xff1f; 业务驱动#xff1a;根据页面需求#xff0c;把常用 UI#xff08;按钮、输入框、弹窗、表格等#xff09;抽象成组件#xff0c;保证一致性。维度考量#xff1a;从布局、表单、数据展示、工具类等…累计产出120 加个组件为什么要封装这么多组件业务驱动根据页面需求把常用 UI按钮、输入框、弹窗、表格等抽象成组件保证一致性。维度考量从布局、表单、数据展示、工具类等不同维度拆分颗粒度既不能太粗难复用也不能太细维护成本高。团队协作核心团队负责基础组件业务团队按需扩展分层维护。复用率整体组件复用率达60%~80%剩余按业务差异扩展。打包 560 页面会不会有性能问题解决方案问题单次全量打包时间长、产物体积大、部署更新慢。优化按页拆分 entry开启多进程 parallel-build开启 cache、DLLPlugin、babel-loader cache路由懒加载、Code Splitting、动态 import资源压缩Terser、cssnano、开启 gzip/BrotliCI/CD 增量构建、灰度发布。Vue3 中 ref 和 reactive 区别ref可包裹基本类型或对象返回{ value: ... }的响应式对象访问/赋值需.value。reactive只能接收对象返回 Proxy直接访问其属性即响应式。computed 与 watch 区别computed惰性求值、带缓存适合计算衍生状态。watch侦听响应式源执行副作用异步或同步可配置 immediate、deep。beforeMount 和 mounted 区别beforeMount模板已编译、但 DOM 未挂载到页面上此时拿不到真实 DOM。mountedDOM 已插入页面可执行 DOM 操作、第三方库初始化。0→1 新项目搭建要考虑哪些技术选型框架Vue/React、状态管理Pinia/Redux、UI 库、构建工具Vite/Webpack项目结构目录分层、约定规范性能首屏渲染、Code Splitting、CDN、缓存策略跨端适配响应式布局、rem/vw、PostCSS开发流程CI/CD、自动化测试、代码规范、日志/监控、安全团队可维护性文档、模板、脚手架项目整体性能优化手段资源优化压缩、合并、CDN、HTTP2/3懒加载路由、组件、图片Tree Shaking、Code Splitting预加载/预取preload、prefetchWeb Worker、微前端大型项目路由两种模式Hash 模式URL 中#后的部分由前端拦截浏览器不会向服务器请求History 模式基于 HTML5 History APIURL 美观但刷新需后端做所有路由重写。Hash 模式如何通过#定位能否用锚点部署区别重写配置作用定位浏览器遇到#xxx不请求服务器JS 通过window.location.hash或onhashchange处理路由。锚点可共存但要避免路由和页面内部锚点冲突可在路由前加/前缀。部署Hash 模式无需服务器配置History 模式要把除静态资源外的所有路由指向index.html。重写rewrite保证 SPA 路由跨路径刷新时服务器返回同一个入口页面。什么情况下会导致内存泄漏全局对象/闭包长时间持有大对象未解绑事件监听、定时器setInterval、setTimeout未取消订阅WebSocket、RxJS、PromiseDOM 引用未释放组件卸载后仍在引用TypeScript 数据类型原始类型number、string、boolean、null、undefined、symbol、bigint对象类型object、Array、Tuple、enum、Function特殊类型any、unknown、void、never组合类型union、intersection、literal、interface、type aliasrem 的缺点及精度问题根字体大小怎么确定缺点根字体一变全局联动在不同设备上可能出现四舍五入带来的小数精度误差。解决减少小数、在 PostCSS/构建时做 px2rem、控制根字体为可整除值。根字体通常按设计稿宽度动态计算如html { font-size: clientWidth/10 px; }或用 flexible 库保证 1rem 设计稿 10px。