前端构建工具webpack在项目中优化(三)

一  抽象语法树(Abstract Syntax Tree):

1 AST: JavaScript Parser 会把代码转化为一颗抽象语法树(AST),这颗树定义了代码的结构,通过操纵这颗树,我们可以精准的定位到声明语句、赋值语句、运算语句等等,实现对代码的分析、优化、变更等操作。

2 AST用途:

  • 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
  • 如 JSLint、JSHint 对代码错误或风格的检查,发现一些潜在的错误
  • IDE 的错误提示、格式化、高亮、自动补全等等
  • 代码混淆压缩
  • UglifyJS2 等
  • 优化变更代码,改变代码结构使达到想要的结构
  • 代码打包工具 Webpack、Rollup 等等
  • CommonJS、AMD、CMD、UMD 等代码规范之间的转化
  • CoffeeScript、TypeScript、JSX 等转化为原生 Javascript

3 webpack 简单实现:https://juejin.cn/post/6844903966849892359#heading-22

推荐阅读:

file-loader使用:https://www.jianshu.com/p/d18980a6d779 

用 babel-plugin 实现按需加载:https://zhuanlan.zhihu.com/p/210280253

原文地址:https://www.cnblogs.com/terrymin/p/15146858.html