一、什么是 Tree Shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确

webpack在实例化的时候会在全局创建一个Tapable子类Compiler, 该实例掌握了初始化配置信息，运行编译入口函数，注册和调用插件等等。 但是, 每个chunk都是有css与js组成, 也就是说当其中一个文件发生变化，这个chunk都会重新编译，此时contenth…

本篇文章从 什么是 Tree Shaking、如何使用 Tree Shaking、Tree Shaking 的原理：usedExports 和 sideEffects 以及 如何实践 Tree Sha

一、前言 上一篇讲到对JS语法的处理，本篇将介绍 Tree Shaking 。 我们经常会在主文件或者组件文件中引入其他模块中的代码，但实际上我们只用其中的一部分，剩下的代码则不需要引入。然而在默认情

相信使用过 webpack 的小伙伴，对 tree shaking 功能都不会陌生。tree shaking, 通常用于移除 javascript 上下文中未使用的代码(dead-code)。 tree shaking，可以有效减小最后打包文件的体积。因此在 webpack 打…

前端小伙伴都知道，为了降低包大小，经常会把依赖的前端模块独立打包，比如把 vue、vue-router 打到一个单独的包 vendor 中。另外，常会将存在多个路由的复杂页面的每个页面都单独打一个包，只有访问某个页面的时候，再去下载该页面的js包，以此来加快首页的渲染。 无论是…

SplitChunks插件是什么呢，简单的来说就是Webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。 提到前端优化，提取公共代码是必不可少的手段。在Webpack出现前，提取公共代码是人为去处理，而Sp…

用某度翻译后：“该插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMap的按需加载。” 搭建个简单的Wenpack Demo，演示一下。 先安装MiniCssExtractPlugin插件。 安装成功后，在webpack…

webpack 的特点之一是处理一切模块，我们可以将逻辑拆分到不同的文件中，然后通过模块化方案进行导出和引入。现在 ES6 的 Module 则是大家最常用的模块化方案，所以你一定写过 import './xxx' 或者 import 'something-in-nodemod…