Vue3 Tree-Shaking

111 阅读1分钟

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代码中进行选择器匹配
  • 没有匹配到,则删除对应选择器的样式代码