Webpack ​

概述 ​

Webpack是一个用于现代JavaScript应用程序的静态模块打包工具。

Webpack的能力：

• 编译代码能力，提高效率，解决浏览器兼容问题
• 模块整合能力，提高性能，可维护性，解决浏览器频繁请求文件的问题
• 万物皆可模块能力，项目维护性增强，支持不同种类的前端模块类型，统一的模块化方案，所有资源文件的加载都可以通过代码控制

Webpack和vite区别 ​

• Webpack先打包，再启动开发服务器，请求服务器时直接给予打包后的结果。
• vite直接启动开发服务器，请求哪个模块再对哪个模块进行实时编译。

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到相应的文件目录。

性能优化 ​

CDN（内容分发网络） ​

CDN是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。

懒加载 ​

懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。

避免回流和重绘 ​

详见浏览器部分。

注：如何优化动画？

• 一般情况下，动画需要频繁的操作DOM，就就会导致页面的性能问题，我们可以将动画的 position 属性设置为 absolute 或者 fixed ，将动画脱离文档流，这样他的回流就不会影响到页面了。

节流与防抖 ​

详见JS部分。

图片优化 ​

1. 不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。
2. 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。
3. 小图使用 base64 格式。
4. 将多个图标文件整合到一张图片中（雪碧图）。
5. 选择正确的图片格式。

Webpack优化 ​