当前位置：首页 > news >正文

webpack vite

news 来源：原创 2025/6/18 7:39:43

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 多个函数合并成一个函数。代码体积更小，创建函数作用域更少，代码可读性更好