第 8 卷
DLL 文件引入 HTML 4
5module.exports = { 6plugins: [
7new webpack.DllReferencePlugin({ 8manifest: path.resolve(__dirname, 'dll/vendors.manifest.json') // 引用
DLL manifest 文件，告知 Webpack 复用 DLL 模块 9}),
10new AddAssetHtmlPlugin({ 11filepath: path.resolve(__dirname, 'dll/vendors.dll.js'), // 将 DLL 文件引
入 HTML
| 12 | outputPath: 'dll', // DLL文件输出路径 |
|---|---|
| 13 | publicPath: 'dll' // DLL文件的公共路径 |
| 14 | }), |
| 15 | new HtmlWebpackPlugin({ template: './public/index.html' }) |
| 16 | ] |
| 17 } |
- 其他辅助优化（提升缓存效率）
• 排除无需处理的文件：通过 exclude 配置排除 node_modules、 dist 等目录，避免
Webpack 解析不必要的文件。
• 使用 thread-loader 开启多线程构建：将耗时的 loader 任务（如 Babel 转译、Sass 转译）分配到
多个线程并行执行，配合缓存使用可进一步提升速度：
Code block
1module.exports = { 2module: {
3rules: [ 4{
5test: /\.js$/, 6exclude: /node_modules/,
7use: [
| 8 | 'thread-loader', //开启多线程，需置于耗时loader之前 |
|---|---|
| 9 | { |
| 10 | loader: 'babel-loader', |
| 11 | options: { cacheDirectory: true } |
| 12 | } |
| 13 | ] |
| 14 | } |
• 禁用生产环境相关优化（开发环境）：开发环境无需启用代码压缩（ TerserPlugin）、CSS 提
取（ MiniCssExtractPlugin）等耗时优化，使用 style-loader 注入 CSS 即可。
补充总结
- loader 与 plugin 核心区别：loader 负责模块转换，plugin 负责流程扩展；前者作用于编译阶段的
单个模块，后者作用于全构建生命周期。
- Webpack 处理 CSS/Sass 核心：依赖 css-loader/sass-loader 转译模块，开发环境用 style-
loader 注入，生产环境用 MiniCssExtractPlugin 提取。
- HMR 原理：基于 WebSocket 通信，监听文件变化生成增量更新资源，客户端加载后通过运行时替
换模块，实现无刷新更新。
- 代码分割实现方式：入口分割、动态导入（按需加载）、splitChunks 自动提取公共代码，核心目
标是减少首屏加载体积。
- Webpack 缓存优化核心：启用 filesystem 模块缓存、loader 缓存，预编译第三方依赖
（DllPlugin），减少重复编译开销。
十一、Tree Shaking是什么,以及如何在Webpack中使用?
Tree Shaking（树摇）是前端工程化中用于删除项目中未被使用的代码（死代码）的优化技术，核心目标是减小打包后 bundle 的体积。其名称形象地比喻为“摇晃树木，抖落枯萎的叶子（未使用代
码）”，仅保留被引用的有效代码。Tree Shaking 仅支持 ES 模块（ES Module，即 import/export），不支持 CommonJS 模块（ require/module.exports）。
- Tree Shaking 的核心原理
• 依赖静态分析：ES 模块的导入导出是静态的（导入导出语句只能在模块顶层，且不能动态判
断），Webpack 可在打包时通过静态分析，确定哪些模块、哪些导出内容被实际引用。
- 标记未使用代码：Webpack 会标记出未被引用的导出内容（即死代码）。
• 删除死代码：在代码压缩阶段（如 TerserPlugin），将标记的死代码删除，最终生成精简的
bundle。
- 在Webpack中使用Tree Shaking的条件与配置
使用 Tree Shaking 需满足两个核心条件，再配合简单配置即可生效：
（1）核心前提条件
• 代码必须使用 ES 模块（ import/export）：避免使用 CommonJS 模块（ require 是动态
• 指定 mode: 'production'：Webpack 在生产环境下会自动启用 Tree Shaking（内置
（2）基础配置（无需额外配置，满足前提即可生效）
Code block
1module.exports = {
| 2 | mode: 'production', //自动启用Tree Shaking |
|---|---|
| 3 | entry: './src/index.js', |
| 4 | output: { |
| 5 | filename: '[name].[contenthash].js', |
| 6 | path: path.resolve(__dirname, 'dist'), |
| 7 | clean: true |
| 8 | } |
| 9 | } |
（3）增强Tree Shaking效果的额外配置
如需更精准地控制 Tree Shaking（如标记某些模块不被树摇），可添加以下配置：
• 优化 usedExports（标记未使用导出）：显式标记未被使用的导出，增强 TerserPlugin 的删除效
果（生产环境默认启用，可手动强调）：
Code block
1module.exports = { 2optimization: {
| 3 | usedExports: true, //标记未被使用的导出内容 |
|---|---|
| 4 | } |
| 5 } |
• 通过 package.json 配置 sideEffects（排除有副作用的模块）：
“副作用”指模块执行时除了导出内容外，还会对外部环境产生影响（如修改全局变量、引入 CSS 样式、执行 polyfill 等）。Tree Shaking 会默认保留有副作用的模块，避免误删关键代码。通过
sideEffects 可明确告知 Webpack 哪些模块无副作用，可安全树摇：
Code block
1// package.json 2{
3"sideEffects": [ 4"*.css", // CSS 文件有副作用（注入样式），不被树摇
全站分卷索引 · 26 卷
- 1第 1 卷
- 深入解析：npm 安装包及四大包管理工具对比
- 一、npm 安装包的完整过程
- ◦ 先检查项目根目录的 package.json 文件，读取目标包的版本约束（如 ^1.2.3、
- ◦ 结合 package-lock.json（npm 5+ 新增）或 npm-shrinkwrap.json，优先锁定已
- ◦ 更新 package-lock.json：记录本次安装的所有包的精确版本、依赖关系、下载地址等信
- ◦ 执行生命周期脚本：若包自身或项目中配置了 preinstall、 install、
- • 性能排序（安装速度+磁盘占用）：pnpm > yarn > cnpm > npm（最新版 npm 已优化，差距缩
- • 网络优化：cnpm 依赖国内镜像，npm/yarn/pnpm 可手动配置镜像，pnpm 缓存跨项目复用更
- 三、pnpm 存储结构减少磁盘占用+提高安装速度的原理
- • 全局共享存储目录：pnpm 会在系统中创建一个全局共享存储目录（默认路径：Windows
- • 硬链接复用包内容：硬链接是文件系统层面的特性，它不复制文件本身，仅创建一个指向原文件数
- • 符号链接组织依赖结构：pnpm 不采用扁平依赖结构，而是通过符号链接在项目
- 2第 2 卷
- 3第 3 卷
- 4第 4 卷
- • 使用 ESBuild 替代 Babel/Terser（可选）：
- 总结
- 六、loader和plugin的区别及其在Webpack中的作用
- • 定位不同：loader 专注于“模块转换”，解决非 JS/JSON 模块的加载与转译问题；plugin 专注
- • 工作时机不同：loader 仅在“编译阶段”（解析模块时）执行，针对单个模块进行处理；plugin
- • 使用方式不同：loader 配置在 module.rules 中，通过 test 匹配目标文件，指定对应的
- • loader的作用：将非 JS/JSON 模块转换为 Webpack 可识别的模块，以便纳入依赖图谱进行打
- • plugin的作用：扩展 Webpack 的构建能力，覆盖从初始化配置到输出文件的全流程，实现
- 七、如何使用Webpack来处理CSS和Sass
- • 步骤1：安装依赖：
- • 步骤2：Webpack配置：
- • 生产环境（提取为单独 CSS 文件）：
- 5第 5 卷
- 6第 6 卷
- 7第 7 卷
- 8第 8 卷
- • 排除无需处理的文件：通过 exclude 配置排除 node_modules、 dist 等目录，避免
- • 使用 thread-loader 开启多线程构建：将耗时的 loader 任务（如 Babel 转译、Sass 转译）分配到
- • 禁用生产环境相关优化（开发环境）：开发环境无需启用代码压缩（ TerserPlugin）、CSS 提
- 补充总结
- • 依赖静态分析：ES 模块的导入导出是静态的（导入导出语句只能在模块顶层，且不能动态判
- • 删除死代码：在代码压缩阶段（如 TerserPlugin），将标记的死代码删除，最终生成精简的
- • 代码必须使用 ES 模块（ import/export）：避免使用 CommonJS 模块（ require 是动态
- • 指定 mode: 'production'：Webpack 在生产环境下会自动启用 Tree Shaking（内置
- • 优化 usedExports（标记未使用导出）：显式标记未被使用的导出，增强 TerserPlugin 的删除效
- • 通过 package.json 配置 sideEffects（排除有副作用的模块）：
- 9第 9 卷
- 10第 10 卷
- • HMR 体验：在 React 项目中修改某个组件的样式或逻辑，页面无刷新，组件样式/逻辑实时更新，
- • environment：Webpack 环境准备完成后触发（如 Node.js 环境变量配置），插件可在此阶段获
- • entryOption：在 Webpack 解析入口配置（ entry）后触发，可用于修改入口配置（如动态添
- • afterResolvers：解析器（resolver，用于查找模块路径）初始化完成后触发，可用于自定义模块
- • beforeRun：在 Compiler 开始执行编译前触发（仅在首次构建和 watch 模式下重新构建时触
- • watchRun：仅在 watch 模式下（文件变化触发重新构建）触发，在编译开始前执行，可用于监听
- • compilation：当一个新的 Compilation 实例（负责模块解析、依赖收集、生成 chunk）被创建时
- • normalModuleFactory：普通模块工厂（用于创建普通模块，如 JS 模块）初始化时触发，可用
- • contextModuleFactory：上下文模块工厂（用于创建上下文模块，如
- • moduleAsset：当一个模块生成对应的资源（如图片、CSS 文件）时触发，可用于跟踪模块与资
- • shouldEmit：在输出文件前触发，返回 boolean 值，决定是否输出文件（返回 false 可终止
- • emit：在输出文件到磁盘前触发，是插件修改输出资源的关键钩子（如 TerserPlugin 在此阶
- 11第 11 卷
- 12第 12 卷
- 13第 13 卷
- 14第 14 卷
- • 重复编译未变化模块：开发环境中未启用缓存，每次代码修改后都全量重新编译，而非仅编译变化
- • 资源处理低效：
- • 配置不合理：
- • 项目本身复杂度高：模块数量庞大（千级以上）、依赖链过深、存在大量动态依赖，导致
- • Webpack 内置缓存（Webpack 5+）：配置 cache 选项，将模块缓存到内存或磁盘，重启开发
- • Loader 缓存：为耗时 Loader（如 babel-loader、 sass-loader）启用缓存，避免重复转
- • 预编译第三方依赖（DllPlugin）：第三方依赖（如 React、Vue）极少变化，通过 DllPlugin
- • 排除无需处理的文件：通过 exclude 排除 node_modules、 dist 等目录，减少
- • 开启多线程构建：使用 thread-loader 将耗时的 Loader 任务分配到多个线程并行执行，充分
- 15第 15 卷
- • 优化静态资源处理：
- • 开发环境：禁用生产优化：开发环境核心目标是“快速构建”，无需启用代码压缩、CSS 提取等耗
- • 生产环境：精准优化：生产环境核心目标是“产物优化”，但需避免冗余配置：
- • 移除无用插件：检查插件列表，移除开发环境中不需要的生产插件（如 TerserPlugin、
- • 使用高效插件替代：
- • 拆分大型项目（Monorepo）：对于大型项目，使用 Webpack 工作区（Workspaces）或
- • 减少动态依赖：尽量避免 require(`./${filename}`) 等动态依赖，改用静态导入，减少
- • 按需加载第三方依赖：对于体积大的第三方库（如 lodash），使用按需导入（如 import {
- • 开发体验极致：秒级启动开发服务器，毫秒级热更新，彻底解决大型项目开发时“启动慢、更新
- • 零配置开箱即用：默认支持 React、Vue、TypeScript、CSS 预处理器（Sass/Less）、静态资源等
- • 生产环境产物优化：基于 Rollup 打包，默认开启 Tree Shaking、代码分割、资源压缩等优化，产
- • 原生 ESM 支持：顺应前端模块化发展趋势，直接使用浏览器原生 ESM 能力，减少打包层的性能损
- 16第 16 卷
- • 配置灵活强大：支持深度自定义构建流程，可精准控制每一个环节（如模块解析、代码分割、缓存
- • 兼容性广泛：支持旧浏览器（如 IE 11），可通过 Loader 转译各类非标准模块，适配传统项目迁移
- • 多场景适配：对多页面应用、Monorepo、大型企业级项目的支持更成熟，案例丰富，问题解决方
- • 秒级开发服务器启动：无论项目大小（即使是千级模块的大型项目），开发服务器均可秒级启动，
- • 毫秒级热更新：代码修改后，仅需编译变化的模块，无需处理依赖链，更新速度恒定，不受项目规
- • 零配置开箱即用：默认支持 React、Vue、TypeScript、Sass/Less、CSS 模块、静态资源等主流场
- • 高效的生产构建：基于 Rollup 打包，默认开启 Tree Shaking、代码分割、资源压缩、懒加载等优
- • 丰富的内置功能：内置开发服务器、热更新、PostCSS、CSS 预处理器支持、静态资源处理等功
- • 预构建的原因：第三方依赖通常存在以下问题，影响加载效率：
- • 预构建的流程：
- • 兼容 Rollup 插件：Vite 生产环境基于 Rollup 打包，因此大部分 Rollup 插件可直接在 Vite 中使用
- • 扩展 Vite 特有钩子：在 Rollup 插件接口基础上，新增了针对 Vite 开发环境的特有钩子（如处理
- 17第 17 卷
- 18第 18 卷
- • changeOrigin：可选，默认 false。开启后，代理会修改请求头中的 Origin 字段为
- • rewrite：可选，路径重写函数。用于修改请求路径前缀（如前端用 /api 前缀标识接口请
- • secure：可选，默认 true。若目标服务器是 HTTPS 协议，且证书不被信任（如本地开发环
- • ws：可选，默认 false。开启后支持 WebSocket 代理（如后端有 WebSocket 服务时启
- • 代理仅作用于开发环境：Vite 的 server.proxy 是 Dev Server 的配置，生产环境打包后不生
- • 路径匹配规则：代理规则的键是请求路径的前缀，若多个规则匹配，优先匹配更具体的前缀（如
- • WebSocket 代理：若后端有 WebSocket 服务（如实时消息），需开启 ws: true，示
- 19第 19 卷
- • 模块格式不兼容：多数第三方依赖是 CommonJS 格式（如 lodash、moment），而 Vite 开发环
- • 大量小模块导致网络瀑布：部分依赖（如 React 生态、lodash-es）包含大量小模块（单个功能一
- • 依赖路径复杂：第三方依赖内部的路径引用可能包含别名、条件导入等，直接加载会导致解析失
- • 缓存存储位置：预构建结果缓存到项目根目录的 node_modules/.vite 文件夹中，包含转换
- • 缓存失效条件：仅当以下条件发生变化时，才会重新预构建，否则直接复用缓存：依赖版本变化
- • 必要依赖识别：Vite 会扫描项目的入口模块（如 src/main.js）及其直接/间接依赖，识别出需
- • 自定义预构建范围：通过 vite.config.js 的 optimizeDeps.include 和
- • Vite 内部使用 esbuild（基于 Go 语言的构建工具）进行依赖预构建， esbuild 本身支持并
- • 对于多个独立的第三方依赖（如 vue 和 axios），Vite 会并行触发 esbuild 处理，避免串
- • 例如： lodash-es 包含数百个小模块（如 lodash-es/map.js、 lodash-
- • 合并策略：Vite 会根据依赖的内部依赖关系，智能合并关联紧密的模块，避免合并后的包体积过
- • 多格式支持：原生支持 CommonJS → ESM 的转换、JSX 转译、TypeScript 转译等，无需额外配
- 20第 20 卷
- • Tree Shaking：自动移除未被使用的代码（死代码），仅保留被引用的模块和代码片段（基于
- • 代码分割（Code Splitting）：自动拆分第三方依赖（如 vue、 axios）为独立 chunk（如
- • 对动态导入的模块（如 import('./pages/About.vue')），自动拆分为异步 chunk，实现
- • 开发环境：以“原生 ESM 支持”为核心，直接将静态资源作为模块加载，无需打包，确保开发体
- • 生产环境：以“优化输出”为核心，对静态资源进行压缩、哈希命名、按需转换（如小图片转
- • 零配置支持：默认支持常见静态资源类型（ png、 jpg、 gif、 svg、 woff、 mp4
- • 开发环境：直接通过 import 或 url() 加载图片，Vite Dev Server 实时返回图片资源，支持
- • 小图片转 Base64：默认将小于 4KB 的图片转换为 Base64 编码，嵌入到 JS/CSS 中，减少 HTTP
- • SVG 特殊处理：支持直接导入 SVG 作为组件（需配合 @vitejs/plugin-vue 等框架插件），
- • 处理逻辑与图片类似：开发环境直接加载，生产环境自动压缩、哈希命名、输出到
- • 示例： // CSS 中引用字体
- • 开发环境：直接通过 import 或 <audio>/<video> 标签加载，Vite Dev Server 提供资源服
- 21第 21 卷
- 22第 22 卷
- • targets：决定转译的程度，目标环境越旧，转译后的代码兼容性越好，但体积越大。可通过
- • 语法转译插件：负责将 ES6+ 语法转为 ES5（如 @babel/plugin-transform-arrow-
- • 语法提案插件：负责转译尚未成为 ES 标准的语法（如 @babel/plugin-proposal-class-
- • 工具类插件：负责辅助转译过程（如 @babel/plugin-transform-runtime 复用辅助代码，
- • @babel/preset-env：核心预设，用于转译 ES6+ 语法，可根据目标环境按需加载插件（最常
- • @babel/preset-react：用于转译 React 的 JSX 语法，包含 @babel/plugin-
- • @babel/preset-es2015（已废弃）：早期用于转译 ES2015 语法，现被
- • 预设按配置顺序从右到左执行（与插件相反）。例如上述配置中，先执行 @babel/preset-
- • 原因：预设是“插件集合”，右侧预设（如 TypeScript 转译）的输出可能需要左侧预设（如 ES6+
- 23第 23 卷
- • runtime: "automatic"（React 17+ 推荐）：自动导入 react/jsx-runtime 模块中的 jsx
- • runtime: "classic"（旧版 React 16-）：转译为 React.createElement 函数调用，需手动
- • 属性名转换：JSX 中的 className 转译为 className（避免与 JavaScript 关键字 class
- • 事件名转换：JSX 中的驼峰式事件名（如 onClick）保持不变，转译为函数调用的属性（如
- • 子节点处理：JSX 中的子元素（文本、其他 JSX 元素）会作为 children 参数传入 jsx 或
- • Fragment 处理：空标签 <></>（React Fragment）会转译为 jsx(React.Fragment,
- 24第 24 卷
- 25第 25 卷
- 26第 26 卷