webpack vite

​

1、webpack

webpack打包工具（重点在于配置和使用，原理并不高优。只在开发环境应用，不在线上环境运行），压缩整合代码，让网页加载更快。

前端代码为什么要进行构建和打包？

体积更好（Tree-shaking、压缩、合并），加载更快
编译高级语法（scss、TS、ES6+、模块化）
兼容性和错误检查（Ployfill、postcss、eslint）
统一高效的开发环境，统一的构建流程和产出标准，集成公司构建规范（提测、上线）

基本配置、高级配置

1）基本配置

拆分配置和merge：common dev prod配置
启动本地服务 webpack-dev-server
处理ES6 babel-loader
处理样式 style-loader css-loader less-loader postcss-loader（loader执行顺序从后往前）
处理图片 file-loader url-loader

2）高级配置

多入口
抽离css
抽离公共代码
异步加载js（懒加载）
处理JSX babel-loader
处理Vue vue-loader

module chunk bundle分别是什么意思？区别？

module 各种源码文件，webpack中一切皆模块，被引入的都可以看作模块，js、css、img
chunk 多模块合成的（类似在内存中还没产出的代码块），entry splitChunk import()生成chunk
bundle 最终的输出文件

webpack性能优化

1）优化打包构建速度

（生产环境）
优化babel-loader：加cacheDirectory、加include或exclude
IgnorePlugin
noParse 引入的时候避免打包的东西
happyPack 多进程打包
ParallelUglifyPlugin 多进程压缩JS
（不能用于生产环境）
自动刷新 整个网页全部刷新，速度比较慢；整个网页全部刷新，状态全丢失
热更新 新代码生效，网页不刷新，状态不丢失
DllPlugin动态链接库插件，前端框架vue React，体积大构建慢。较稳定，不常升级版本。同一个版本只构建一次即可，不用每次都重新构建。

2）优化产出代码执行效率

小图片base64编码
bundle+hash
懒加载
提取公共代码
使用CDN加速 img、css、js推到CDN上
使用production 自动开启代码压缩；Vue和React等会自动删掉调试代码；启动Tree-Shaking
使用Scope Hosting 多个函数合并成一个函数。代码体积更小，创建函数作用域更少，代码可读性更好

构建流程概述（打包流程）

参考：webpack构建流程

loader和plugin区别？

loader模块转换器
plugin扩展插件

常见loader和plugin?

参考：loader和plugin

tree Shaking,什么时候失效

2、vite

极快的开发服务器启动（基于原生ESM的按需编译）
闪电般的HMR
开箱即用的现代化前端支持（ts、css）
生产构建使用rollup

预加载

为什么本地启动快

3、babel

babel从ES高级语法向低级语法转变

​