❓Webpack 如何提升构建速度？
1.使用缓存，避免重复编译。例如
bable-loader开启cacheDirectory选项；还可以配置 webpack5 的cache type: filesystem选项2.使用thread-loader多线程并行构建 3.使用esbuild-loader代替bable-loader，esbuild 使用 Go 语言编写，速度快很多 4.开发环境可以关闭一些影响构建速度的功能，例如 Tree-shaking，可以使用cheap-module-source-map代替完整source-map
| 方法 | 说明 |
|---|---|
使用 cache-loader / babel-loader 的缓存 | 避免每次都重新编译所有模块 |
开启 Webpack 的 cache 选项（v5） | 内建持久缓存机制 |
开启 thread-loader（多线程） | 对 JS / Babel 处理使用多线程并行编译 |
使用 esbuild-loader 替代 babel-loader | esbuild 用 Go 编写，比 Babel 快几十倍 |
| 减少模块体积（按需加载 UI 库） | 更少依赖意味着更少构建负担 |
使用 resolve.alias 减少模块查找路径 | 缩短模块查找深度，少走冤枉路 |
避免过度使用 source-map | 开发环境可用 cheap-module-source-map 取代 source-map |
开启 exclude 精确匹配 loader 范围 | 比如 babel-loader exclude 掉 node_modules |
| 使用 Vite 替代 Webpack（彻底解决 😎） | 用原生 ESM 模块启动快得飞起！ |
❓Webpack 如何减小最终构建产物的体积？
1.开启
usedExports和sideEffects: false实现 Tree-shaking； 2.配置splitChunks选项，提取公共依赖 3.使用动态加载语句懒加载路由 4.使用MiniCssExtractPlugin移除未使用的 CSS 代码 5.使用 CDN 加载 React/Vue 这类大库
| 方法 | 原理 / 作用 |
|---|---|
| Tree-shaking | 移除未使用的 ES Module 导出，减少无用代码 |
| Code Splitting | 拆分 bundle（如路由级别、组件级别），按需加载 |
| 懒加载（Lazy Loading） | import() 动态加载模块，结合路由或事件触发 |
| 压缩与混淆 | 使用 TerserPlugin 压缩 JS，压缩空格、变量名等 |
| 按需引入三方库 | 比如 lodash-es + babel-plugin-lodash 只打包用到的函数 |
| 移除无用插件 / polyfill | 减少重复引入的兼容性补丁，设置目标浏览器后可剔除 |
| CSS Tree-shaking / PurgeCSS | 移除未使用的 CSS，搭配 MiniCssExtractPlugin |
| 使用 CDN 外链大库 | 将 React / Vue 等大库从打包中排除，改为从 CDN 加载 |
| 图片压缩 / WebP 格式 | 减少静态资源大小，提升初次渲染速度 |
❓追问：Tree-shaking 会影响构建速度吗？
会，可以在开发阶段关闭 Tree-shaking