#前端重铸之路 Day7 🔥🔥🔥🔥🔥🔥🔥🔥

前置涩话

掘金的小伙伴们大家好，这里是家里蹲选手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

一、基础配置项

根目录与别名

arduino 复制代码

javascript
复制
export default {
  root: './src',  // 项目根目录
  resolve: {
    alias: {  // 路径别名
      '@': path.resolve(__dirname, './src')
    }
  }
}

环境变量处理
- .env文件自动加载
- 通过import.meta.env访问变量
- 模式区分（development/production）

二、构建优化配置

输出控制

arduino 复制代码

javascript
复制
build: {
  outDir: 'dist',  // 输出目录
  assetsDir: 'static',  // 资源子目录
  assetsInlineLimit: 4096  // 小于4KB资源内联为base64
}

Rollup高级配置

css 复制代码

javascript
复制
build: {
  rollupOptions: {
    output: {
      manualChunks: {  // 自定义代码分割
        vendor: ['vue', 'vue-router']
      }
    }
  }
}

三、插件系统

官方插件
- @vitejs/plugin-vue：Vue单文件组件支持
- @vitejs/plugin-legacy：传统浏览器兼容

社区插件示例

css 复制代码

javascript
复制
import viteImagemin from 'vite-plugin-imagemin';
plugins: [
  viteImagemin({  // 图片压缩
    gifsicle: { optimizationLevel: 3 }
  })
]

四、开发服务器配置

代理与HTTPS

yaml 复制代码

javascript
复制
server: {
  port: 3000,
  proxy: {  // API代理
    '/api': 'http://localhost:8080'
  },
  https: true  // 启用HTTPS
}

HMR优化

yaml 复制代码

javascript
复制
server: {
  hmr: {
    overlay: false  // 禁用错误覆盖层
  }
}

五、高级特性

SSR配置

arduino 复制代码

javascript
复制
export default {
  ssr: {
    target: 'node',
    format: 'cjs'
  }
}

Worker支持

javascript 复制代码

javascript
复制
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引入，减少打包体积。

#前端重铸之路 Day7 🔥🔥🔥🔥🔥🔥🔥🔥

前置涩话

webpack和vite的区别

为什么 Vite 能避免全量打包？

Webpack

开发服务器

文件缓存

webpack的核心

提高webpack的构建速度

常用配置

webpack优化常用插件

vite

一、基础配置项​​

​​二、构建优化配置​​

​​三、插件系统​​

​​四、开发服务器配置​​

​​五、高级特性​​

Vite的常用优化插件

一、基础配置项

二、构建优化配置

三、插件系统

四、开发服务器配置

五、高级特性