include和exclude傻傻分不清？3分钟让你彻底搞懂！

大家好，我是小杨，一个写了6年前端的老司机。今天咱们来聊聊开发中经常遇到的两个概念------include 和exclude。别看它们长得像，用起来可是天差地别！

1. 先看生活化的例子

想象你在准备一场聚会：

include：邀请名单（明确指定谁来）
exclude：黑名单（明确指定谁不能来）

2. 代码中的经典应用

场景1：路由守卫（Vue Router）

javascript 复制代码

// 只对/about和/contact路由生效
{
  path: '/',
  component: Home,
  meta: { requiresAuth: true },
  include: ['/about', '/contact'] // 白名单模式
}

// 对所有路由生效，除了/login
{
  path: '/',
  component: Home,
  meta: { requiresAuth: true },
  exclude: ['/login'] // 黑名单模式
}

场景2：Webpack配置

javascript 复制代码

// 只处理src目录下的js文件
{
  test: /.js$/,
  include: path.resolve(__dirname, 'src'), // 白名单
  loader: 'babel-loader'
}

// 处理所有js文件，除了node_modules
{
  test: /.js$/,
  exclude: /node_modules/, // 黑名单
  loader: 'babel-loader'
}

3. 我踩过的血泪坑

案例1：有次我写了个权限中间件：

javascript 复制代码

// 错误写法！
const allowedRoutes = ['/home', '/profile']
if (!allowedRoutes.includes(req.path)) {
  return res.status(403).send('无权访问')
}

结果把登录页也拦截了！应该用exclude：

javascript 复制代码

const blockedRoutes = ['/admin']
if (blockedRoutes.includes(req.path)) {
  return res.status(403).send('无权访问')
}

案例2：Webpack打包时不小心：

javascript 复制代码

{
  test: /.css$/,
  exclude: /styles/, // 本意是排除node_modules
  loader: 'css-loader'
}

结果把自己的/styles目录也排除了！应该写成：

javascript 复制代码

exclude: /node_modules/

4. 核心区别总结

特性	include	exclude
中文意思	包含	排除
适用场景	明确知道要哪些	明确知道不要哪些
安全性	更安全（白名单）	风险更高（可能漏网）
性能影响	范围小性能好	范围大时性能差
典型应用	路由守卫、loader处理范围	跳过不需要处理的资源

5. 黄金选择法则

优先用include：当你知道确切需要什么时（更安全）
谨慎用exclude：当你知道确切不需要什么时
不要混合用：容易导致逻辑混乱（见过有人同时写include和exclude结果相互抵消）

6. 面试常考题目

面试官："你们项目为什么用exclude而不是include？"

我的回答：

"我们只在处理第三方库时用exclude跳过node_modules，其他场景都用include精确控制范围，这样既能保证安全又避免性能浪费。"

7. 趣味记忆法

include → "in"（在里面）→ 白名单
exclude → "ex"（前任）→ 黑名单

最后送大家一句话

"include是圈地养羊，exclude是篱笆防狼" ------ 这是我在团队内部分享时说的，现在送给你们。

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！