目录
1.Webpack的构建流程
（1）初始化参数。获取用户在webpack.config.js文件中配置的参数。
（2）开始编译。初始化compiler对象，注册所有的插件plugins，插件开始监听webpack构建过程的生命周期事件，不同环节会有相应的处理，然后开始执行编译。
（3）确定入口。根据webpack.config.js文件的entry入口，开始解析文件，构建ast语法树，找出依赖，递归下去。
（4）编译模块。递归过程中，根据文件类型和loader配置，调用相应的loader对不同的文件做转换处理，再找出该模块依赖的模块，递归本操作，直到项目中依赖的所有模块都经过了本操作的编译处理。
（5）完成编译并输出。递归结束，得到每个文件结果，包含转换后的模块以及它们之间的依赖关系，根据entry以及output等配置生成代码块chunk。
（6）打包完成。根据output输出所有的chunk到相应的文件目录。
基本使用 | 尚硅谷 Web 前端之 Webpack5 教程
webpack看这一篇就够了_itpeilibo的博客-CSDN博客
2.常用的plugin和loader有哪些
（1）loader：loader从字面意思理解是加载的意思。由于webpack本身只能打包js文件，所以针对css、图片等格式的文件没法打包，就需要引入第三方的模块进行打包。loader虽然是扩展了 webpack，但是它只专注于转化文件（transform）这一个领域，完成压缩、打包、语言翻译。loader是运行在Node.js中。
常用的loader：postcss-loader、css-loader、style-loader、scss-loader、less-loader、eslint-loader等。
（2）plugin：plugin也是为了扩展webpack的功能，但是plugin是作用于webpack本身上的。而且plugin不仅只局限在打包、资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。插件可以携带参数。
常用的plugin：HtmlWebpackPlugin、clean-webpack-plugin、mini-css-extract-plugin、HMR（HotModuleReplacementPlugin）、babel、babel-preset-env等。
3.tree-shaking原理
tree-shaking别名叫摇晃树，最早是由Rollup实现，是一种采用删除不需要的额外代码的方式优化代码体积的技术。tree-shaking会在打包过程中静态分析模块之间的导入导出，确定哪些模块导出值没有被使用并打上标记，将其删除，从而实现了打包产物的优化。
4.前端页面性能优化
（1）减少HTTP请求。一个完整的HTTP请求需要经历DNS查找、TCP握手、浏览器发送HTTP请求、服务器接收请求、服务器处理请求并响应、浏览器接收响应等过程。
（2）善用缓存，如HTTP缓存、本地存储、keep-alive缓存等，不重复加载相同的资源。
（3）静态资源使用CDN。
（4）使用tree-shaking删除不需要的代码，减少代码体积。
（5）通过import动态导入语法进行按需加载，从而达到需要使用时才加载该资源。
（6）压缩css、js文件。
（7）减少回流、重绘。
（8）降低CSS选择器的复杂性。
（9）使用事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
（10）合理使用Web Worker。
（11）使用防抖、节流。
（12）图片压缩和懒加载。图片较小时，使用base64格式，使用字体图标iconfont代替图片图标。
（13）使用SSR服务端渲染。服务端返回HTML文件，客户端只需解析HTML。
5.首屏渲染优化
原因：网络延时问题、资源文件体积是否过大、请求资源是否过多、资源是否重复发送请求、加载脚本的时候、渲染内容阻塞等。
解决办法：减小入口文件体积、使用tree-shaking删除不必要的代码、使用UI框架按需加载、图片压缩和懒加载、善用HTTP缓存和本地存储、合理使用Web Worker、使用SSR服务端渲染等。
首屏加载速度慢怎么解决？_首屏优化_大佩梨的博客-CSDN博客
6.如何减少回流和重绘
CSS中避免回流、重绘：
- 尽可能在DOM树的最末端改变尺寸、大小、是否隐藏等。
- 避免设置多层内联样式。
- 动画效果应用到position属性为absolute或fixed的元素上。
- 避免使用table布局。table比其他html标记占更多的字节，布局比较死板不灵活，会阻挡浏览器渲染引擎的渲染顺序从而使得加载速度慢。
- 使用transform、opacity等动画效果不会引起回流、重绘。
JS操作避免回流、重绘：
- 避免使用JS一个样式修改完接着修改下一个样式，最好一次性更改CSS样式，或者将样式列表定义为class的名称。
- 避免频繁操作DOM，使用文档片段创建一个字树，然后再拷贝到文档中。
- 先隐藏元素，进行修改后再显示该元素。
- 避免循环读取offsetLeft等属性，在循环之前把它们存起来。
【精选】一文教会你何为重绘、回流？_回流和重绘_几何心凉的博客-CSDN博客
7.SEO优化
分享SEO优化的8个技巧_csdn seo优化-CSDN博客
8.SSR服务端渲染
9.Git的基本使用
10.图片懒加载
前端必会的图片懒加载(三种方式)_javascript技巧_脚本之家
11.Echarts怎么做页面适配
【精选】ECharts实现数据可视化入门教程（超详细）_牛哄哄的柯南的博客-CSDN博客
echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）_h5自适应echarts-CSDN博客
56万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
