不压缩资源（直接上传源码到生产环境）

不压缩资源（直接上传源码到生产环境）

前端开发中，资源压缩是常见的优化手段，但某些场景下开发者会选择直接上传源码到生产环境。这种做法看似违背常规，但在特定需求下反而能带来优势。

为什么选择不压缩资源

调试与维护变得异常简单。生产环境出现问题时，开发者可以直接查看线上代码，无需映射sourcemap或对比本地源码。例如React组件库开发时，未压缩的props类型检查错误信息能直接显示具体文件名和行号：

// 未压缩的React组件报错示例
function Button({ size }) {
  if (typeof size !== 'string') {
    console.error(`Invalid prop 'size' supplied to Button. Expected string, got ${typeof size}`)
  }
  return <button className={`btn-${size}`}>Click</button>
}

动态代码加载场景下，未压缩代码允许运行时修改逻辑。教育类平台常需要这种特性，比如代码沙盒环境要实时执行用户编写的ES6+语法：

// 动态加载未压缩模块示例
const userCode = `export default function() {
  return [...Array(5)].map((_,i) => i*2)
}`

const blob = new Blob([userCode], { type: 'text/javascript' })
const module = await import(URL.createObjectURL(blob))
console.log(module.default()) // [0, 2, 4, 6, 8]

具体实现方案

通过webpack配置关闭优化项：

// webpack.config.js
module.exports = {
  mode: 'development',
  optimization: {
    minimize: false,
    concatenateModules: false
  },
  output: {
    pathinfo: true // 保留路径信息
  }
}

对于现代浏览器支持的ES模块，可以直接部署原生ES6代码：

<!-- 直接引用ES模块 -->
<script type="module">
  import { uncompressFunc } from '/src/utils/math.js'
  console.log(uncompressFunc(1.618)) // 保留原始函数名
</script>

性能影响实测对比

使用Lighthouse对压缩/未压缩版本测试：

但内网应用场景下，网络延迟仅为2ms时，未压缩版本的性能差异变得可以接受。某金融系统后台实测数据显示，在千兆内网中两者加载时间差异不足300ms。

安全风险控制措施

暴露源码时需要特别注意：

1. 移除开发环境专用代码

// 使用babel插件自动清除
if (__DEV__) {
  testCredentials() // 构建时移除
}

2. 混淆关键配置项

// 保留结构但混淆敏感值
const config = {
  apiKey: ['K', 'EY'].reverse().join(''), // 运行时计算
  endpoints: Object.freeze({
    payment: '/pay'
  })
}

3. 设置HTTP头禁止缓存

Cache-Control: no-store, max-age=0

监控与回滚机制

建立源码监控体系：

// 差异检查脚本示例
const git = require('simple-git')()
const fs = require('fs')

git.diff(['HEAD']).then(diff => {
  if (diff.includes('SECRET_KEY')) {
    throw new Error('敏感信息泄露!')
  }
  
  fs.writeFileSync('diff-report.json', JSON.stringify({
    changedFiles: diff.match(/\+\+\+ b\/(.+)/g),
    timestamp: new Date().toISOString()
  }))
})

配合CI实现自动回滚：

# GitHub Actions 配置示例
- name: Verify Production Code
  run: |
    if grep -q "console.debug" dist/*.js; then
      gh workflow run rollback.yml
    fi

浏览器兼容性处理

针对旧版浏览器提供降级方案：

<!-- 模块回退策略 -->
<script type="module" src="modern.js"></script>
<script nomodule src="legacy.js"></script>

使用条件注释保护IE用户：

// 未压缩代码中的IE检测
try {
  new Function('async () => {}')()
} catch (e) {
  document.body.innerHTML = '<h1>请使用现代浏览器</h1>'
  throw new Error('Unsupported browser')
}

真实场景应用案例

某可视化搭建平台采用未压缩方案：

1. 用户自定义组件实时调试

// 平台动态加载用户组件
window.loadComponent = async (code) => {
  const transpiled = await Babel.transform(code, {
    presets: ['react']
  }).code
  return eval(transpiled) // 依赖清晰报错堆栈
}

2. 生产环境直接修改LESS变量

/* 未编译的LESS变量被保留 */
@primary-color: #1890ff;

body {
  background: lighten(@primary-color, 40%);
}

3. 错误监控精准定位

// 错误上报包含原始行号
window.onerror = (msg, file, line, col) => {
  Sentry.captureException({
    message: msg,
    location: `${file}:${line}:${col}`,
    stack: new Error().stack
  })
}

长期维护策略

制定代码规范应对未压缩场景：

1. 禁止调试语句残留

// ESLint规则配置
rules: {
  'no-console': ['error', { allow: ['warn', 'error'] }],
  'debugger': 'error'
}

2. 强制类型检查

// TS配置严格模式
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true
  }
}

3. 文档注释规范化

/**
 * @deprecated 使用新版本calculate方法
 * @param {number} base - 基数
 * @throws {RangeError} 参数超出范围时抛出
 */
function oldCalculate(base) {
  if (base > 100) throw new RangeError()
}