前端代码规范：从混乱到清晰的实操指南
代码规范这东西，听起来像“玄学”，其实说白了就是“约定好怎么写代码”。我见过很多小团队觉得“规范太麻烦，不如直接写功能”，结果项目做大后，改一行代码牵一发而动全身，最后不得不重构。我自己踩过的坑告诉你：规范不是约束，是帮你少走弯路的“导航仪”。
命名规范：让变量自己“说话”
变量、函数、类的命名，是代码规范的“第一关”。我刚工作时，为了图快，变量名经常用“data1”“list2”，结果上线后用户反馈有bug，我对着控制台的“data1”看了半天，完全想不起来这到底存的是用户信息还是商品列表。后来学乖了，按“做什么用+是什么类型”的格式命名，比如“userInfo”（用户信息对象）、“getProductList”（获取商品列表函数），从此调试效率至少提升50%。
你可能会说“命名哪有那么讲究”，但你想想：当你半夜被紧急bug叫醒，打开代码看到“let x = 10;”和“let remainingStock = 10;”，哪个能让你更快定位问题？MDN文档中明确提到：“有意义的变量名能提高代码的可读性，减少维护成本”，这可不是空话。
下面是我整理的不同类型命名规范，你可以直接抄作业：
| 命名类型 | 规范示例 | 不推荐写法 | 优势 |
|---|---|---|---|
| 变量名 | userName、totalPrice | a、data、temp1 | 一眼看出存储内容 |
| 函数名 | getUserInfo()、formatDate() | fn()、handleClick2() | 明确函数功能和返回值 |
| 常量名 | MAX_UPLOAD_SIZE、API_BASE_URL | maxsize、apiurl | 突出不可修改特性 |
| 组件名 | UserCard、OrderList | user-card、order_list | 符合React/Vue组件命名习惯 |
注释和文件结构：让代码像“带说明书的机器”
除了命名，注释和文件结构也很重要。我见过最极端的情况：一个2000行的JS文件，没有一行注释，函数嵌套5层，新人接手直接“投降”。后来我们规定“复杂逻辑必须写注释，每个文件不超过300行”，结果团队沟通成本降了一半。
注释不用多，但要“关键处必有”。比如写正则表达式时，一定要注释匹配规则：“// 匹配手机号：1开头，3-9中间，后8位数字”，不然过一周你自己都忘了这串字符啥意思。函数注释可以简单写“做什么+入参+返回值”，比如：
/*
计算商品总价（含运费）
@param {number} price 商品单价
@param {number} quantity
数量
@param {number} freight 运费
@returns {number} 总价
/
function calculateTotal(price, quantity, freight) {
return price quantity + freight;
}
这种注释在VSCode里鼠标悬停就能看到，比翻文档方便多了。
文件结构方面，推荐“按功能模块分文件夹”，比如一个电商项目可以这样：
src/
├─ components/ // 公共组件（按钮、输入框等）
├─ pages/ // 页面组件（首页、详情页等）
├─ utils/ // 工具函数（格式化时间、请求封装等）
├─ api/ // 接口请求（按模块分文件，如userApi.js）
└─ styles/ // 全局样式
我之前把所有接口请求写在一个api.js里，结果文件涨到1000行，找个接口要翻半天。后来按模块拆分后，每个文件不超过200行，找接口快得像“百度搜索”。
前端性能优化：让页面加载快到“用户忍不住点赞”
你有没有遇到过这样的用户反馈：“你们网站打开太慢了，我等不及就关了”？我之前做的一个企业官网，首页加载要6秒，客户差点解约。后来用了几个“笨办法”优化，加载时间降到1.5秒，客户直接追加了第二年的合作。今天就把这些办法拆解给你，不用懂高深理论，跟着做就能见效。
图片优化：别让图片“拖垮”你的页面
图片是前端性能的“头号杀手”，我见过一个页面放10张未经压缩的Banner图，单张就5MB，加载完用户都刷到下一页了。其实优化图片没那么复杂，记住“三招”就行：
第一招“选对格式”：大部分场景用WebP（比JPEG小30%），透明图用PNG，动图用WebP或GIF（GIF体积大，尽量少用）。不过要注意，IE不支持WebP，所以可以用标签降级：
这样支持WebP的浏览器用.webp，不支持的用.jpg，两全其美。
第二招“压缩大小”：推荐用TinyPNG（https://tinypng.com/，nofollow）在线压缩，我测试过，一张2MB的JPEG压缩后能到300KB，画质几乎没区别。如果是团队协作，可以用Webpack插件image-webpack-loader，自动压缩图片，不用手动操作。
第三招“懒加载”：屏幕外的图片先不加载，用户滚动到附近再加载。原生HTML就能实现，给img加个loading="lazy"属性：
我用这个方法优化过一个商品列表页，从20张图片一次性加载，变成“看哪张加载哪张”，首屏加载速度提升了60%。
代码分割：让浏览器“按需加载”代码
除了图片，JS和CSS文件太大也会拖慢页面。我之前把所有JS打包成一个main.js，结果文件3MB，浏览器解析时卡了2秒。后来用“代码分割”，把首页用不到的代码拆出去，首屏JS体积直接减了70%。
框架用户（React/Vue）可以直接用官方路由工具，比如Vue Router的“懒加载组件”：
// 原来：一次性加载所有页面
import Home from './pages/Home.vue'
import About from './pages/About.vue'
// 现在：访问时才加载
const Home = () => import('./pages/Home.vue')
const About = () => import('./pages/About.vue')
这样首页只加载Home相关代码，About页面的代码等用户点击“关于我们”时才加载，速度快多了。
原生JS可以用import()动态导入，比如点击按钮才加载图表库：
document.getElementById('showChart').addEventListener('click', () => {
// 点击后才加载echarts，不点击不加载
import('echarts').then(echarts => {
// 使用echarts渲染图表
})
})
这种“按需加载”的思路，能让你的页面“轻装上阵”，尤其适合功能多的大型项目。
缓存策略：让用户第二次访问“秒开”页面
用户第一次访问慢一点没关系，第二次必须“秒开”，这就需要缓存。我之前做的博客网站，用了缓存后，用户第二次打开速度从2秒降到0.5秒，回头率提升了20%。
最简单的缓存是“HTTP缓存”，在服务器配置里加一句“Cache-Control: max-age=86400”（缓存1天），浏览器就会把CSS、JS、图片存到本地，下次直接从硬盘读，不用再请求服务器。不过要注意，文件名最好带“哈希值”，比如style.8a3b2.js，这样文件内容变了，哈希值也变，浏览器就会重新下载，避免用户看到旧内容。
另一个办法是“Service Worker”，相当于在浏览器里装个“本地服务器”，离线都能访问页面。不过这个稍微复杂点，新手可以先从HTTP缓存入手，性价比最高。
Google的Web Vitals报告里提到，页面加载速度直接影响用户留存——加载时间每增加1秒，转化率可能下降7%。你想想，如果用户打开你做的页面，3秒还没加载完，他是不是早就去竞品网站了？
如果你按这些方法优化了项目，欢迎回来告诉我页面加载快了多少！或者你遇到过哪些性能问题，也可以在评论区留言，我们一起想办法解决～
你问图片压缩后会不会变模糊？其实只要工具选对了，画质根本没啥影响，我自己试过好多次了。就拿我常用的TinyPNG来说吧，它那个智能压缩算法特别厉害，不是简单把像素删掉，而是分析图片里哪些颜色和细节人眼不敏感，然后“偷偷”优化掉那些部分。我之前做电商项目的时候，首页有张Banner图，摄影师给的原图2.3MB，用TinyPNG拖进去压缩完一看，才320KB，放到页面上和原图对比，放大到100%看都找不出模糊的地方，客户还以为我没压缩呢。现在不管是个人项目还是公司项目，只要是图片我都先过一遍这个工具，连设计师都夸我“压缩完比她导出的还清楚”。
不过要是你团队里人多，或者每天要处理十几张图，手动上传压缩就太麻烦了。这种时候可以试试Webpack的image-webpack-loader插件，配好规则后，每次打包代码它会自动把图片压缩好，不用你管。我之前带团队的时候，有个实习生每天花两小时手动压缩商品图，后来我让他配了这个插件，打包时自动处理，他直接空出两小时摸鱼——哦不，是做更重要的事。对了，导出图片的时候还有个小技巧，JPEG格式记得存成“80%品质”，别选100%，我试过80%和90%的画质几乎没差，但体积能小20%；PNG图如果颜色不多（比如logo、图标），就用“索引颜色模式”，比RGB模式体积小一半，这些小细节做好了，压缩效果会更好。
代码规范需要手动检查吗？有没有工具可以自动辅助？
完全不用手动逐条检查！现在有很多成熟的工具可以自动帮你规范代码，新手也能轻松上手。比如 ESLint 可以检查 JavaScript 语法错误和命名规范，Prettier 能自动格式化代码（比如缩进、换行），这两个工具配合使用，保存代码时就能自动修复大部分格式问题。我团队现在用的是“ESLint+Prettier+VSCode 自动保存”组合，写完代码按 Ctrl+S，变量名不规范、缩进不对的问题直接自动改好，比人工检查效率高10倍。你可以在项目里安装这两个工具，配置好规则文件（比如 Airbnb 规范或公司自定义规则），团队成员统一用这套配置，风格就能保持一致。
团队成员习惯不同，怎么统一代码风格？
团队统一风格的关键是“工具+文档”。工具方面，刚才提到的 ESLint 和 Prettier 可以通过共享配置文件（比如 .eslintrc.js、.prettierrc）强制统一规则，新成员拉取代码后，安装依赖就能自动应用规则，不用担心“他用空格我用 Tab”的问题。文档方面， 写一份“团队代码规范手册”，记录特殊场景的约定（比如组件 props 命名、API 请求封装格式），不用太长，重点写“和通用规范不一样的地方”。我之前带团队时，把手册放在项目根目录的 README 里，新人入职第一天就能照着配环境，30分钟就能和团队风格对齐，比口头沟通高效多了。
图片压缩后会影响画质吗？有没有推荐的压缩工具？
只要选对工具，压缩后画质几乎看不出差异！我自己常用的是 TinyPNG（https://tinypng.com/），它用智能压缩算法，能在减小文件体积的同时保留图片细节，亲测一张 2MB 的商品图压缩后能到 300KB 左右，肉眼完全看不出模糊。如果是团队协作或需要批量处理，还可以用 Webpack 的 image-webpack-loader 插件，配置好后打包时自动压缩图片，不用手动一张张上传。 导出图片时注意“保存为 Web 格式”，比如 JPEG 选择“80% 品质”，PNG 用“索引颜色模式”，这些小细节能让压缩效果更好。
小项目（比如个人博客）需要做代码分割吗？会不会太麻烦？
要不要做代码分割，主要看项目规模和加载速度需求。如果你的个人博客只有 3-5 个页面，JS 文件总共不到 500KB，其实可以不用分割，直接打包成一个文件更简单。但如果页面超过 10 个，或者引入了大型库（比如 echarts、three.js），哪怕是小项目也 分割——我之前帮朋友改个人博客，他用了一个 1MB 的图表库但只在“数据统计”页面用，没做分割时首页加载要 3 秒，分割后首页 JS 体积减到 300KB，加载速度快了 2 秒。新手可以从“路由级分割”入手，比如用 Vue Router 或 React Router 的懒加载功能，配置简单（文章里有示例代码），10分钟就能搞定，性价比很高。
缓存配置错了会有什么问题？怎么避免缓存导致用户看到旧内容？
缓存配置最常见的坑是“用户看到旧内容”，比如你改了 CSS 但用户浏览器还加载缓存的旧文件，导致样式错乱。避免这个问题其实很简单，文章里提到的“文件名加哈希值”就是关键——比如把 style.css 改成 style.8a3b2.css，文件内容变了哈希值也会变，浏览器就会认为是新文件，自动重新下载。 开发环境可以暂时关闭强缓存（配置 Cache-Control: no-cache），避免改了代码却看不到效果；生产环境 给静态资源（CSS、JS、图片）设置 1-7 天的缓存时间，同时配合哈希值命名，既能利用缓存提速，又不会让用户看到旧内容。我之前踩过没加哈希值的坑，改了按钮颜色后，用户反馈“还是老颜色”，后来加上哈希值就再没出现过这个问题。
