打包优化

webpack 为我们构建现代化的前端页面提供了十分巨大的帮助。然而随着页面功能越来越复杂，项目体积越来越庞大时，webpack 的打包时间也会变得越来越长，打包体积也会越来越大，长时间的构建和大体积的文件会造成一些效率与性能上的问题。所以我们有必要了解一些 webpack 打包优化的技巧。

工程化介绍

Plugin

plugin 是 webpack 的另一项核心功能之一，它可以扩展增强 webpack 的功能以使其更加灵活强大，从而可以适应不同的应用场景。

Loader

loader 是 webpack 的核心功能之一，它可以对源文件进行解析转换，使之转变成为 webpack 可以使用的模块，从而增强 webpack 的文件处理能力。

打包过程

了解 webpack 的打包构建过程有助于加深我们对 webpack 的理解，增加对其打包过程的掌控能力。

介绍

Webpack 是用于现代 JS 程序的 静态模块 打包工具。它主要用于将模块化的 JS 文件打包整合在一起，以便使我们的代码能够运行在浏览器中。除了处理打包 JS 文件之外，Webpack 也能够通过 Loader 处理转换其它资源，为我们的开发工作提供了极大的便利。

打包工具概述

随着前端工程化概念的兴起和 Node.js 的发展，在开发构建一定规模的前端项目时，为了使我们的代码能够稳定的运行在浏览器中，我们需要一种方便、快速、高效的工具来帮助我们处理各种模块化的代码文件，于是打包工具便应运而生。

发布订阅模式

发布订阅模式与观察者模式在功能上类似，都是在对象之间简历联系，当一个被依赖（被观察）的对象状态发生变化后，会通知到其他对象（依赖对象），但发布订阅模式与观察者模式不同之处在于它通知依赖对象的方式是通过自定义事件，而不直接通知观察者。

观察者模式

观察者模式是当被观察的对象在其状态发生变化时通知其他对象（称为“观察者”）。这种模式定义了对象间一种一对多的依赖关系，当被依赖的对象发生变化时，其他依赖的部分可以收到通知并执行相应操作。

防抖与节流

防抖与节流是我们在开发中经常用到的工具函数，它们的作用是降低事件的触发频率，从而提高性能。

防抖函数