Tree Shaking的定义
Tree Shaking 是一种优化技术,主要用于减少 JavaScript 或 TypeScript项目中未使用的代码。其原理是通过静态分析并标记未被引用的模块、函数、变量等,将其从最终构建结果中去除掉,进而达到减小文件大小和提升项目性能的目的。
什么是无用的代码
- 不会被运行到的代码
- 值会影响到无关程序运行结果的变量
Tree Shaking的使用环境-----【静态模块化ES Module】
ES module与CommonJS的区别
- ES Module输出的是值的引用,CommonJS输出的是值的拷贝
- ES Module编译时执行,CommonJS运行时加载
Tree Shaking在JS中的应用
在webpack中,启动Tree Shaking功能必须同时满足条件
- 使用ESM规范编写模块代码
- 配置optimization.usedExports:true,启动标记功能
Tree Shaking在CSS中的应用-----【PostCSS】
PostCSS 提供一个解析器,能够将CSS解析成AST抽象语法树,通过PostCSS插件对CSS对应的AST进行操作,达到Tree Shaking的目的。
实现思路
- 遍历所有CSS文件的选择器
- 根据所有CSS文件的选择器,在JS代码中进行选择器匹配
- 没有匹配到,则删除对应选择器的样式代码