webpack和vite

webpack

官网链接：概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网 (webpackjs.com)

积累使用到的插件

1.Webpack Bundle Analyzer

分析器，使用交互式可缩放树图可视化 webpack 输出文件的大小，用来分析打包dist文件哪些资源可以进行优化

安装：

npm install --save-dev webpack-bundle-analyzer

查看bundle分析的三种方式：Webpack Bundle Analyzer包分析器 - 掘金 (juejin.cn)

常见的面试题

webpack -- 收集面试题篇 - 掘金 (juejin.cn)

vite

官网链接：开始 | Vite 官方中文文档 (vitejs.dev)

对比

webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
vite直接启动开发服务器，请求哪个模块再对该模块进行实时编译。

vite优点：

1. webpack服务器启动速度比vite慢。由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显
2. vite热更新比webpack快。vite在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译；
3. vite使用esbuild(Go 编写) 预构建依赖，而webpack基于nodejs, 比node快 10-100 倍

vite缺点：

1. 生态不及webpack，加载器、插件不够丰富
2. 打包到生产环境时，vite使用传统的rollup进行打包，生产环境esbuild构建对于css和代码分割不够友好。所以，vite的优势是体现在开发阶段
3. 没被大规模重度使用，会隐藏一些问题
4. 项目的开发浏览器要支持esmodule，而且不能识别commonjs语法