Webpack&Vite总结篇与进阶

模块化

Webpack

Webpack

入口entry

分离app和第三方库入口

这是什么？ 这是告诉 webpack 我们想要配置 2 个单独的入口点（例如上面的示例）。

为什么？ 这样你就可以在 vendor.js 中存入未做修改的必要 library 或文件（例如 Bootstrap, jQuery, 图片等），然后将它们打包在一起成为单独的 chunk。内容哈希保持不变，这使浏览器可以独立地缓存它们，从而减少了加载时间。

多页面

这是什么？ 我们告诉 webpack 需要三个独立分离的依赖图（如上面的示例）。

为什么？ 在多页面应用程序中，server 会拉取一个新的 HTML 文档给你的客户端。页面重新加载此新文档，并且资源被重新下载。然而，这给了我们特殊的机会去做很多事，例如使用 optimization.splitChunks 为页面间共享的应用程序代码创建 bundle。由于入口起点数量的增多，多页应用能够复用多个入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

输出 output

loader

loader:webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

loader 用于转换某些类型的模块，而插件plugin则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

常用的js处理babel-loader、样式处理css-loader、style-loader、文件file-loader、url-loader（小base64,大前）

自定义

plugin

打包优化、资源管理和环境注入

常见plugin：
老版本webpack插件：


代码优化plugin：

mini-css-estract-plugin（提取）、compression-webpack-plugin（压缩文件）、terser-webpack-plugin(压缩js代码）、cssMinizer（压缩css）、split-chunk-plugin（分割）

性能优化手段

代码分割

Webpack代码分割原则与最佳实践

一、文件分割阈值

建议对以下类型文件进行分割：

1. 第三方依赖库：体积超过$50KB$（如React全家桶、Ant Design）
2. 业务代码模块：超过$100KB$的独立功能模块
3. 公共资源：复用率>3次的公共组件/工具类

二、核心分割原则

1. 按业务维度拆分

// 路由级动态导入（React示例）
const Dashboard = React.lazy(() => import('./views/Dashboard'));

2. 第三方库独立打包

// webpack.config.js
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        priority: 10
      }
    }
  }
}

3. 动态加载优化

// 带加载状态的动态导入
const Editor = lazy(() => import(/* webpackPrefetch: true */ './Editor').then(module => ({
  default: module.Editor
})));

三、性能平衡策略

1. 首屏关键资源：$ \text{总大小} \leq 200KB $
2. 非关键资源延迟加载：使用webpackPreload和webpackPrefetch
3. 缓存优化：配置contenthash

output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].chunk.js'
}

四、监控与调优

1. 使用webpack-bundle-analyzer分析模块分布
2. 通过Chrome DevTools的Coverage工具检测利用率
3. 设置报警阈值：
   • 单个chunk超过$500KB$时告警
   • 未使用的代码超过$30\%$时优化

最佳实践示例配置：

// webpack.prod.js
optimization: {
  splitChunks: {
    chunks: 'async',
    minSize: 30000,
    maxSize: 200000,
    cacheGroups: {
      charts: {
        test: /[\\/]node_modules[\\/](echarts|d3)/,
        priority: 20
      },
      utils: {
        test: /[\\/]src[\\/]utils/,
        minChunks: 3
      }
    }
  }
}

注意事项：

1. HTTP/2环境下可适当放宽单文件大小限制
2. 移动端优先项目建议更严格的体积控制
3. 长期缓存策略需配合CDN版本管理### Webpack代码分割原则与最佳实践

压缩

TreeShaking

核心原理

Tree Shaking是基于ES Module静态语法分析的代码优化技术，通过识别模块导入/导出关系，消除未被使用的代码（dead code）。其有效性依赖以下条件：

1. 模块必须使用ES6的import/export语法
2. 代码不应产生副作用（无全局变量修改等）
3. 构建工具需进行依赖关系分析

Webpack配置步骤

1. 基础配置

// webpack.config.js
module.exports = {
  mode: 'production', // 自动启用优化
  optimization: {
    usedExports: true, // 标记被使用导出
    minimize: true, // 启用代码压缩
    minimizer: [new TerserPlugin()] // 使用压缩工具
  }
}

2. package.json配置

{
  "sideEffects": [
    "*.css",  // 标记有副作用的文件
    "*.global.js"
  ]
}

3. Babel配置注意项

// .babelrc
{
  "presets": [
    ["@babel/preset-env", { 
      "modules": false // 保留ES模块语法
    }]
  ]
}

代码规范要求

1. 模块导出使用具名导出：

// math.js
export const square = x => x * x
export const cube = x => x * x * x

2. 按需导入：

// app.js
import { square } from './math.js'
console.log(square(5))

高级优化策略

1. 作用域提升（Scope Hoisting）

optimization: {
  concatenateModules: true
}

2. 第三方库优化配置：

// webpack.config.js
rules: [{
  test: /\.js$/,
  include: /node_modules\/lodash-es/,
  use: 'babel-loader'
}]

常见问题排查

1. 无效摇树检查清单：

   • 检查@babel/plugin-transform-modules-commonjs是否被禁用
   • 确认sideEffects配置是否正确
   • 验证第三方库是否提供ES模块版本（如lodash-es）

2. 副作用代码示例：

// 会阻止Tree Shaking的写法
window.someGlobal = 'value' // 修改全局对象
import './polyfill' // 无导出但影响运行环境

效果评估指标

通过webpack-bundle-analyzer分析构建结果：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
module.exports = {
  plugins: [new BundleAnalyzerPlugin()]
}

缓存

项目实战