面试之性能优化与webpack的打包流程

目录面试之性能优化vite和webpack的区别大屏ECharts 展示的图形数据量过多导致页面卡顿怎么办App 内嵌 H5 的场景中JS 桥梁JS Bridge首屏加载显示白屏优化css性能优化方面减少使用import引入css设置内容缓存优化重排和重绘减少使用高性属性浮动、定位推荐使用flex布局动画方面js性能优化方面使用cdn的方式引入 console.log h5方面对数据进行缓存防抖节流路由的懒加载vue项目上的优化webpack相关配置 ( vue-cli )图片转化为base64 url-loader图片的压缩 image-webpack-loader把es6语法转化为es5语法等babel-loadergzip压缩 打包的文件大小 - compression-webpack-pluginjs代码的压缩 uglifyjs-webpack-plugin配置别名 chainWebpack里面 config.resolve.alias代码切片设置生产环境不生成map文件追踪错误 productionSourceMap: false 使用CDN加速优化 vue路由等webpack相关配置webpack01之 base.jswebpack02之 dev.jswebpack03之 pro.jswebpack的打包流程流程1读取配置文件2找到入口文件3解析依赖模块4编译模块5合并模块6输出文件loader与plugin的区别面试之性能优化vite和webpack的区别Vite 比 Webpack 快、体验好核心是底层架构完全不同Webpack 是「先打包、再运行」Vite 是「先运行、按需编译」并利用现代浏览器 ESM esbuild 做了极致优化一、核心原理根本不一样1.1Webpack打包优先 启动时递归全量解析所有文件、生成完整依赖图 用 loader 编译所有模块JS/TS/Vue/React/CSS等 打包成一个/多个 bundle 再启动开发服务器、提供 bundle → 项目越大启动越慢、HMR越慢1.2Vite按需编译 开发时不打包业务代码直接启动服务器 利用浏览器原生ESMimport/export 浏览器请求哪个模块Vite 才实时编译哪个模块 第三方依赖用 esbuildGo 写的预构建速度极快 → 启动速度几乎和项目大小无关 二、Vite 比 Webpack 强在哪核心优势2.1.冷启动秒开 vs 慢启动 Webpack中大型项目启动 20s60sVite300ms1s几乎秒开 原因 Webpack全量编译打包 Vite不打包业务代码、esbuild 预构建依赖、只在浏览器请求时编译2.2.热更新HMR毫秒级 vs 秒级 Webpack改文件 → 重新构建 chunk → 推送更新大项目13秒 Vite改文件 → 只编译这一个模块 → 浏览器直接替换几十毫秒 原因Vite 基于原生ESM只更新单个模块不重建依赖图2.3.内置能力开箱即用 vs 复杂配置 Webpack 要手动配 loaderbabel、ts、css、vue、file 等 要配 devServer、HMR、优化 Vite 内置支持ESM、TS、JSX、CSS、PostCSS、JSON、静态资源 内置开发服务器、HMR、代理、环境变量 Vue/React/Svelte 官方模板零配置可用2.4.生产构建Rollup 更精简 Webpack打包后代码偏臃肿tree-shaking 一般 Vite 生产用 Rollup 打包 tree-shaking 更彻底、产物更小、执行更快 支持ESM、代码分割、懒加载2.5.开发体验更现代 支持import.meta.env 环境变量 内置import.meta.glob 批量导入 天然支持SSR、Web Worker、Wasm 缓存更智能依赖强缓存、源码协商缓存大屏ECharts 展示的图形数据量过多导致页面卡顿怎么办0可以聚合重要数据点击的时候弹窗加载完整的图形数据1数据聚合抽样 对海量时序数据如小时级监控数据按时间粒度聚合 对散点图、热力图等高密度图表使用抽样算法如均匀抽样、极值保留抽样只保留关键数据点 ECharts 内置支持在 series.data 传入前手动处理数据或结合后端接口做聚合。2分级加载懒加载 核心图表如核心指标仪表盘优先渲染非核心图表如明细趋势图延迟到首屏渲染完成后加载。 对多 tab 大屏只渲染当前 tab 的图表切换 tab 时再渲染对应图表避免一次性渲染所有组件。3数据裁剪 对超出图表可视区域范围的数据直接裁剪例如折线图只保留当前视图内的 x 轴区间数据缩放时再动态请求或加载对应区间数据。4减少更新频率 数据更新时只改变化的 data不全量 setOption。 高频实时数据加防抖/节流比如 500ms 更一次。App 内嵌 H5 的场景中JS 桥梁JS Bridge是连接 Native 原生代码iOS 的 OC/Swift、Android 的 Java/Kotlin和 H5 前端代码JavaScript的通信通道本质是一套双向调用的协议规范一、核心前提Native 向 H5 注入通信通道App 初始化 WebView 时会先向 H5 的 window 对象注入一个全局 JS 对象相当于给 H5 留一个 “操作接口”比如Android 端通过 addJavascriptInterface 注入iOS 端通过 WKScriptMessageHandler 注入// H5 中能直接访问的全局对象由 App 注入window.AppBridge{// App 提供给 H5 的方法也可以是 H5 暴露给 App 的回调onAppNotify:function(data){}};首屏加载显示白屏优化设置内联样式浏览器再加载html的时也一并加载了内联样式这样就会减少首页白屏的效果。可假如屏保就是在一开始加载整个程序的时候添加一个屏保模拟出正在加载过程可假如骨架屏首页的直接引入其他路由进行路由懒加载形式导入设置代码分割拆分非首屏代码为异步 Chunk避免全量加载splitChunks里面配置的js、css、图片等配置压缩、gzip压缩、踢出log等无效代码css性能优化方面减少使用import引入css尽量减少使用import引入css因为浏览器再引入这个 css的 时候会阻塞进程先加载 import引入的css加载完毕后再继续后续的进程设置内容缓存将HTML内容设置Cache-Control 或Expires可以将HTML内容缓存起来避免频繁向服务器端发送请求; meta http-equiv“Cache-Control” /优化重排和重绘减少重排减少通过dom节点去操作 css样式等内外边距JS获取DOM元素的位置相关属性如width/height/left等使用Flex时比使用inline-block和float时重排更快所以在布局时可以优先考虑Flex减少重绘元素的外观如colorbackgroundvisibility等属性发生改变时会触发重绘尽量减少这类操作减少使用高性属性浮动、定位推荐使用flex布局动画方面尽量使用 transform 转化属性去实现相关动画而不是使用定位 left right等形式js性能优化方面使用cdn的方式引入 console.log h5方面对数据进行缓存http相关请求的缓存同一个接口查询的数据一致时使用缓存的数据后端处理使用浏览器缓存使用localStorage sessionStorage cookie相关存储去缓存数据避免再一次加载页面时候重新请求数据防抖节流路由的懒加载就是打包的时候会打包成一个单独的文件打包出来的文件被称为chunk component:()import(../views/profile/Profile.vue)vue项目上的优化01尽量减少data中的数据data中的数据都会增加getter和setter会收集对应的watcher02v-if 和 v-for 不要同时使用03webpack相关配置 ( vue-cli )图片转化为base64 url-loader图片的压缩 image-webpack-loader把es6语法转化为es5语法等babel-loadergzip压缩 打包的文件大小 - compression-webpack-pluginjs代码的压缩 uglifyjs-webpack-plugin设置清除log去掉注释去掉debugger配置别名 chainWebpack里面 config.resolve.alias代码切片设置生产环境不生成map文件追踪错误 productionSourceMap: false 使用CDN加速优化 vue路由等webpack相关配置五大模块enter、output、mode、loader、pluginwebpack01之 base.js入口entry 一般来说 是 src/ main.ts出口output可配置的 path filename 打包的路径loader相关 module - rules1scss、css相关loader vue-style-loader css-loader postcss-loader - 需要 postcss.config.js 配置 自动引入浏览器前缀、还有浏览器版本限制 package.json - browserslist sass-loader2jsbabel-loader 需要 babel.config.js 里面配置预设等thread-loader多线程exclude: /node_modules/ 排除node的解析3tsbabel-loader4vuevue-loaderresolve相关1extensions 配置文件名后缀可省略2alias 配置别名plugins相关1html-webpack-plugin 自动引入文件 插件2clean-webpack-plugin 清除上次打包缓存3webpack 下的 ProgressPlugin 进度条4vue-loader 下的 VueLoaderPlugin 插件5unplugin-auto-import/webpack、unplugin-vue-components/webpack、unplugin-vue-components/resolvers 自动引入插件webpack02之 dev.js1mode: ‘development’,2devtool: ‘eval-cheap-module-source-map’, //开发环境配置 定位错误根源3eslint-webpack-plugin4cache 缓存 type: ‘memory’5devServer 服务器设置 端口、服务器代理等webpack03之 pro.js1cache 缓存 type: ‘filesystem’,2optimizationminimizer - CssMinimizerPlugin 、TerserPlugin 去log等 css-minimizer-webpack-plugin、terser-webpack-pluginsplitChunks 代码切片 vue、ele、loadsh单独切片为js 3zip-webpack-plugin 打包后 压缩为 zip文件4copy-webpack-plugin 负责静态资源等webpack的打包流程webpack的打包流程就是把项目中的各个模块打包成静态资源以便于在浏览器中加载与运行。流程1读取配置文件webpack打包时先读取webpack.config.js文件解析其中的配置信息根据不同的环境执行打包。2找到入口文件在解析配置文件后webpack会寻找到入口文件(main.js或者index.js)根据入口文件开始相关递归地解析所有依赖关系3解析依赖模块从入口文件找到找到依赖关系执行对于的依赖模块比如js文件css文件图片等资源根据不同的loading或者plugin加载这些资源4编译模块webpack使用loading来编译依赖模块执行css效果js转义js压缩、提取公共代码等效果5合并模块webpack编译完毕后会把所有模块合并成一个bundle.js文件6输出文件webpack最后根据output配置输出打包后的文件到指定目录下用于浏览器加载与运行loader与plugin的区别loader:是用来处理非JavaScript文件eg把ts转换为jsjsx转换为jsless转换为css图标转换为base64等 loader是再模块加载时对其进行转换因此可以立即为一个转换器。 plugin是用来处理各种任务的eg打包优化自动创建html与自动导入bundle.js文件、资源管理、变量注入、清理输出目录、压缩js代码等操作。 plugin是通过监听webpack的生命周期事件来执行对应的任务。