前置涩话
掘金的小伙伴们大家好，这里是家里蹲选手sin~ 太棒啦(๑•̀ㅂ•́)و✧，也是成功坚持了一周啦~
这一周的学习笔记分享也是收获了许多，把零散的知识收集起来过程还挺有意思。前端重铸之路的第一阶段也是到今天就完结啦！撒花撒花✿✿ヽ(°▽°)ノ✿ 接下来就是准备海投面试，如果顺利的话，会给大家带来更多的工作业务上的技术分享。
✅ Webpack、Vite
webpack和vite的区别
vite和webpack的差异在于开发阶段是否进行全量打包
生产构建时，vite和webpack最终都会进行全量打包，但vite底层使用Rollup，而webpack使用自研的打包引擎
为什么 Vite 能避免全量打包？
1.原生 ESM 支持：
现代浏览器支持直接加载 ES 模块，Vite 将代码分为依赖（预构建）和源码（按需编译）两部分：
依赖：如 lodash，通过 esbuild 预构建为 ESM 格式。
源码：如 .vue 文件，浏览器请求时实时编译。
2.ESBuild 编译：
使用 Go 编写的 esbuild 编译单文件，速度比 Babel 快 10-100 倍。
3.缓存机制：
已编译文件缓存在内存中，重复请求直接返回。
Webpack
一个用于现代JavaScript应用程序的静态模块打包工具。可以使用webpack管理模块，因为在webpack里，一切皆为模块，通过分析模块间的依赖关系，在其内部构建一个依赖图。最终编译输出模块为HTML、CSS、JS以及各种静态文件（图片、字体等）。
以某个模块作为入口，根据入口分析出所有模块的依赖关系，然后对各种模块进行合并、压缩，行成最终的打包结果。 webpack不会运行你的代码，不用担心兼容性问题，通通形成依赖，最终合并在一起。
当webpack处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块（不再局限js文件），并生成一个或多个bundle。
编译代码：提高效率，解决浏览器兼容问题。
模块整合：提高性能，可维护性，解决浏览器频繁请求文件问题。
万物皆模块：项目维护性增强，支持不同种类的前端模块类型，统一的模块化方案，所有资源文件的加载都可以通过代码控制。
webpack的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来
在运行过程中会在特定的时间点广播特定事件，插件在监听它所关心的事件会执行特定的逻辑，并且插件可以调用webpack提供的api改变webpack的运行结果。
从启动到结束会依次执行以下三大步骤：
初始化流程：从配置文件和shell语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数。
编译构建流程：从入口文件（entry）发出，针对每个module串行调用对应的loader去翻译文件内容，再找到该module依赖的module，递归地进行编译处理。
输出流程：对编译后的module组合成chunk，把chunk转换成文件，输出到文件系统。
开发服务器
在这个阶段，webpack并不会形成打包结果文件，而是把打包的内容放到内存中，当我们请求服务器时，服务器从内存中给予我们打包结果。与此同时，当源码发生变动时，webpack自动重新打包，同时刷新页面以访问到最新的打包结果。
文件缓存
打包会给文件加上hash值（文件指纹），防止因为浏览器缓存，内容不能及时更新。
webpack的核心
entry
指示
webpack应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的.默认值是./src/index.js
output
告诉
webpack在哪里输出它所创建的bundle，以及如何命名这些文件。主要输出文件的默认值是./dist/main.js，其他生成文件默认放置在./dist文件夹中 output.filename决定了每个输出bundle的目录和名称。 output.path指定所有输出文件的目录，即将来所有资源输出的公共目录，必须是绝对路径。 output.publicPath指定HTML文件中所有资源引入的公共路径前缀。不会对生成文件的路径造成影响，而是在HTML文件引入各种资源时，将publicPath作为前缀加到引入资源的路径前面。 可以将publicPath修改为相对路径。 Output.chunkFilename决定了非入口chunk文件的名称。就是除了入口文件生成的chunk外，其他文件生成的chunk文件命名。
loader
webpack只能理解JavaScript和JSON文件。loader让webpack能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中 loader属性（运行打包文件之前） test属性：识别哪些文件会被转换。 use属性：定义出在进行转换时，应该使用哪个loader。 include/exclude（可选）：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹） query（可选）：为loader提供额外的设置选项
css-loader能够使用类似import的方法引入css文件。
style-loader将所有计算后的样式加入页面中。
plugin（运行在整个编译周期）
loader用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
mode
指示webpack使用相应模式的配置。
development、production和none三种。默认production。
提高webpack的构建速度
优化loader配置：使用loader时，可以通过配置include、exclude、test属性来匹配文件，接触include、exclude规定哪些匹配应用loader。
合理使用resolve.extensions：合理配置文件后缀名。
优化resolve.modules：用于配置webpack去哪些目录寻找第三方模块。可以指明第三方模块的绝对路径（node_modules），减少寻找。
优化resolve.alias：给常用路径起一个别名。
使用DLLPlugin插件：webpack也内置了DLL的功能，为的就是可以共享，不经常改变的代码，抽成一个共享库。在之后编译过程中，会被引入到其他项目的代码中。
使用cache-loader：在一些性能开销大的loader之前添加，将结果缓存到磁盘，显著提升二次构建速度。
terser启动多线程
合理使用sourceMap
常用配置
js
{ test: /\.(jpg|png|gif|jpeg|bmp)$/,
use: [{
loader: 'url-loader',
options: {
// 限制图片大小 10240 表示10kb
limit: 10240,
name: 'images/img-[hash:5].[ext]'
}
}]},
{ test: /\.(svg|eot|ttf|woff|woff2)$/，
use: [{
loader: 'file-loader',
options: {
name: 'font/[hash:7].[ext]'
}
}]}这样设置之后，所有小于 10kb 的图片还是会以 base64 的格式添加，大于 10kb 的则会以路径的形式引用
添加到文件夹中的方式都是一样，还是在 options 选项中添加 name 属性，其中 ext 表示以文件之前的格式后缀命名
npm install --save-dev mini-css-extract-plugin
在webpack的配置文件中是这样的
js
// 第一步：引入插件，在plugins中使用
new MiniCssExtractPlugin({
filename: 'css/[name].css', // 打包文件名称
ignoreOrder: false // 移除警告
})
// 第二步：修改style-loader 为 MiniCssExtractPlugin.loader
{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader'] },
{ test: /\.(sass|scss)$/, use: [MiniCssExtractPlugin.loader,'css-loader', 'sass-loader'] },
按需加载
默认分包策略具有以下规则：
- 新的 `chunk` 是否被共享或者是来自 `node_modules` 的模块
- 新的 `chunk` 体积在压缩之前是否大于 `30kb`
- 按需加载 `chunk` 的并发请求数量小于等于 `5` 个
- 页面初始加载时的并发请求数量小于等于 `3` 个
可以自定义一下这些文件名称，最简单的方式：
在 `router` 定义文件中：按需加载（动态加载）webpack优化常用插件
Webpack优化插件整理好啦！这些是常用的：
TerserWebpackPlugin：压缩JS代码，删除冗余内容。
CssMinimizerWebpackPlugin：压缩CSS，需配合MiniCssExtractPlugin使用。
MiniCssExtractPlugin：将CSS提取为独立文件，减少JS体积。
SplitChunksPlugin：代码分割，提取公共代码或第三方库。
CompressionWebpackPlugin：生成Gzip/Brotli压缩资源。
CleanWebpackPlugin：打包前清理输出目录。
WebpackBundleAnalyzer：可视化分析打包体积。
HotModuleReplacementPlugin：开发时模块热更新。
HtmlWebpackPlugin：自动生成HTML并注入资源。
ImageMinimizerPlugin：压缩图片资源。
vite
一、基础配置项
-
根目录与别名
arduinojavascript 复制 export default { root: './src', // 项目根目录 resolve: { alias: { // 路径别名 '@': path.resolve(__dirname, './src') } } } -
环境变量处理
.env文件自动加载- 通过
import.meta.env访问变量 - 模式区分（
development/production）
二、构建优化配置
-
输出控制
arduinojavascript 复制 build: { outDir: 'dist', // 输出目录 assetsDir: 'static', // 资源子目录 assetsInlineLimit: 4096 // 小于4KB资源内联为base64 } -
Rollup高级配置
cssjavascript 复制 build: { rollupOptions: { output: { manualChunks: { // 自定义代码分割 vendor: ['vue', 'vue-router'] } } } }
三、插件系统
-
官方插件
@vitejs/plugin-vue：Vue单文件组件支持@vitejs/plugin-legacy：传统浏览器兼容
-
社区插件示例
cssjavascript 复制 import viteImagemin from 'vite-plugin-imagemin'; plugins: [ viteImagemin({ // 图片压缩 gifsicle: { optimizationLevel: 3 } }) ]
四、开发服务器配置
-
代理与HTTPS
yamljavascript 复制 server: { port: 3000, proxy: { // API代理 '/api': 'http://localhost:8080' }, https: true // 启用HTTPS } -
HMR优化
yamljavascript 复制 server: { hmr: { overlay: false // 禁用错误覆盖层 } }
五、高级特性
-
SSR配置
arduinojavascript 复制 export default { ssr: { target: 'node', format: 'cjs' } } -
Worker支持
javascriptjavascript 复制 import workerPlugin from 'vite-plugin-worker'; plugins: [workerPlugin()]
Vite通过分层配置实现灵活性与性能的平衡，建议结合项目规模选择配置粒度。大型项目可拆分vite.config.js为环境专用文件（如vite.prod.js）。
Vite的常用优化插件
vite-plugin-image-optimizer：自动优化图片资源，减少体积。 vite-plugin-chunk-split：优化代码分割，提升首屏加载速度。 vite-plugin-compression：生成Gzip/Brotli压缩文件，减少传输体积。 vite-plugin-html：动态生成HTML文件并注入资源。 rollup-plugin-visualizer：可视化分析打包体积，优化依赖。 vite-plugin-remove-console：生产环境移除console语句，减小代码体积。 vite-plugin-external-cdn：将依赖转为CDN引入，减少打包体积。