vite与webpack打包区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了vite与webpack打包区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

开发项目时会遇到找不到文件的情况，此时发现是

webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果

由于vite启动的时候不需要打包，也就不需要分析模块依赖，编译，使用原生ES模块导入方式，所以启动速度非常快；

　vite采用的是按需动态编译的模式，当浏览器请求需要的模块时，再对模块进行编译，这种处理模式极大的缩短了编译时间，当项目越大，文件越多，vite的开发时优势越明显

Vite

Vite是尤雨溪在开发vue3的时候开发的一个web开发构建工具。

极速的服务启动：使用原生 ESM 文件，无需打包！
　　轻量快速的热重载：无论应用程序大小如何，都始终极快的模块热重载（HMR)
　　丰富的功能：对 TypeScript、JSX、CSS 等支持开箱即用。

　　Vite使用简单，只需执行初始化命令，就可以可得到一个预设好的开发环境，开箱即可获得一堆功能，包括：css预处理、html预处理、异步加载、分包、压缩、HMR等。使用复杂度介于Paracel和Webpack的中间，只是暴露了极少数的配置项和plugin接口，既不会像Paracel一样配置不灵活，又不会像Webpack一样需要了解庞大的loader、plugin生态。灵活适中，复杂度适中。

相比Webpack，Vite有什么优势

a. vite开发服务器启动速度比webpack快。

　　　　webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果

　　　　由于vite启动的时候不需要打包，也就不需要分析模块依赖，编译，使用原生ES模块导入方式，所以启动速度非常快；

　　　　vite采用的是按需动态编译的模式，当浏览器请求需要的模块时，再对模块进行编译，这种处理模式极大的缩短了编译时间，当项目越大，文件越多，vite的开发时优势越明显

　　b. vite的热更新比webpack快。vite在HRM方面（HMR是指当你对代码进行修改并保存后，webpack对代码重新打包，并将新的模块发送到浏览器端，浏览器通过替换旧的模块，在不刷新浏览器的前提下，就能够对应用进行更新），当改动了一个模块后，vite仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。

　　c.由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用了这点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并

　　d. vite 使用esbuild（Go编写）预构建依赖，比webpack的nodejs，快10-100倍　　

3.从Webpack方面能不能做一些编译构建方面的优化

　　a. 多入口的情况下，使用CommonsChunkPlugin来提取公共代码

　　b. 通过externals配置来提取常用库

　　c. 使用Happypack实现多线程加速编译

　　d. 使用Tree-shaking和Scope Hoisting来剔除多余代码

　　e. 使用 webpack-uglify-parallel来提升uglifyPlugin的压缩速度。原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度文章来源地址https://www.toymoban.com/news/detail-494659.html

到了这里，关于vite与webpack打包区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！