构建工具

Vite
- Vite解决的问题
rollup
webpack

Vite

环境变量配置与使用
静态网站部署，支持CI自动化构建（未实操）
[ ] 基于ESbuild及rollop工具实现打包，开发环境ESbuild

Vite解决的问题
[x] 1. 缓慢的开发服务器启动，将模块分为依赖和源码两类，通过ESBuild提前构造依赖
2. Vite是先启动服务，根据页面需要显示的模块进行动态引入，而传统打包器是构建打包好了再启动的服务器
3. ESbuild构建预依赖
rollup

rollup-plugin-babel：让rollup可以使用babel（桥梁）
rollup-plugin-serve：帮助本地起一个静态服务
cross-env：设置不同的环境变量

babel

@babel/core：基础库-核心模块，要使用babel就得使用这个库
@babel/preset-env：将高级语法转换成低级语法
babel-runtime：不会污染全局，如果要产出第三方库lib需要使用babel-runtime
babel-polyfill：会污染全局

webpack

开发环境下打包和生产环境下打包的区别
1. 开发环境下打包是希望更快，不需要压缩，打包，合并，抽离公共资源之类的
2. 生产环境下打包则是以访问性能为主
基本配置
1. 拆分配置及merge
2. 处理ES6
3. 处理样式、处理CSS预处理器
  1. postcss.config.js：搭配postcss-loader使用
  2. .babelrc：搭配babel-loader使用
4. 启动本地服务及服务代理
5. 环境变量的定义：webpack.DefinePlugin({ ENV: JSON.stringify(‘production’) })
高级配置
1. 多入口
2. 抽离CSS文件，以文件形式引入
3. 抽离公共代码
  1. vendor：第三方模块，一般指node_modules中的模块
  2. common：公共模块，最少引用两次以上引用拆分公共模块
4. 懒加载
5. 处理JSX
module、chunck、bundle分别是什么
1. module：webpack中一切皆模块，各个源码文件都是module
2. chunk：多模块合并成的，如entry，import()，splitChunk
3. bundle：最终的输出文件
优化打包效率
1. babel-loader
  1. { use: [‘babel-loader?cacheDirectory’] } // 开启缓存，对于没有变更的ES6代码不用重新打包
2. IgnorePlugin
3. noParse
4. happyPack：多进程打包
  1. 关于开启多进程：项目较大，打包较慢，开启多进程能提高速度，项目较小，打包很快，开启多进程会降低速度（进程开销）
5. ParallelUglifyPlugin：多进程压缩JS
  1. JS单线程，开启多进行压缩更快，和happyPack同理，webpack内置Uglify工具压缩JS
6. 自动刷新
  1. 刷新整个网页，速度较慢，状态会丢失
7. 热更新
  1. 新代码生效，网页不刷新，状态不丢失
8. DllPlugin
  1. 先把常用的库打包好，再引用，下次打包直接引用
优化产出代码
构建流程概述
babel
1. babel：只解析语法，不解析ES6新特性
2. polyfill：针对新语法的兼容
  1. 是core-js 和 regenerator的集合
  2. polyfill文件较大，可通过配置按需引入polyfill
3. babel7.4之后弃用babel-polyfill
  1. 推荐直接使用core-js 和 regenerator
为什么要性能优化
1. 体积更小
2. 合理分包，不重复加载
3. 速度更快，内存使用更少
tree-shaking
1. ES6 module静态引入才能去掉
  1. 动态引入报错
2. Commonjs动态引入，无法静态分析
  1. if (true) { require(‘../config.api.js’) }
Scope Hosting
1. 函数合并，代码体积更小
2. 创建函数作用域更少，代码可读性更好
前端为什么要进行打包和构建
1. 体积更小，加载更快（压缩、合并、Tree-shaking）
2. 编译高级语法（TS、ES6+、模块化、SCSS）
3. 兼容性和错误检查（polyfill、postcss、eslint）
4. 团队统一提效、高效的开发环境、集成公司规范

Vite

Vite解决的问题

rollup

webpack