Less编译无法直接代码分割，需通过构建阶段为不同页面/模块创建独立Less入口文件分别编译为CSS，再按需加载；应限制@import深度、显式引入共享变量，并将首屏CSS内联以避免阻塞。
Less编译时无法直接做代码分割
Less本身是预处理器，不参与运行时加载逻辑，import 只是编译期文本拼接。所谓“Less代码分割”实际是指：在构建阶段，把不同页面/模块的@import关系拆成独立Less入口，分别编译为多个CSS文件，再按需加载。否则所有样式都会被打包进一个main.css，首屏必然加载冗余规则。
用多个Less入口文件替代单入口+全量@import
常见错误是写一个index.less，里面@import "base.less"; @import "header.less"; @import "product-list.less";——这会导致所有样式无差别注入。正确做法是为关键路径单独建入口：
-
critical/home.less：只@import与首页首屏强相关的变量、重置、标题、首屏卡片样式 -
non-critical/product-detail.less：包含商品详情页专属组件，不被首页引用 - 构建脚本（如
lessc或Webpack）对每个入口单独执行编译，生成home.css、product-detail.css等
注意：@import路径必须相对入口文件位置，不是相对项目根目录；否则跨入口复用variables.less时容易路径错乱。
避免@import嵌套过深导致维护失控
Less的@import支持递归展开，但超过2层嵌套后，很难判断某条CSS规则最终来自哪个物理文件。这会直接破坏“按需编译”的前提——你根本不确定删掉module-a.less会不会意外干掉首页按钮样式。
立即学习“前端免费学习笔记（深入）”；
- 限制
@import深度：入口文件最多@import一层（如home.less → _header.less），被导入文件禁止再@import其他样式文件 - 公共部分（颜色、断点）统一放在
shared/下，由各入口显式@import，不走隐式传递 - Webpack用户可用
less-loader的additionalData选项注入全局变量，减少重复@import
否则构建工具可能因依赖图混乱，把非首屏样式也打进home.css里。
首屏CSS内联 + 非关键CSS异步加载的衔接要点
分离出home.css只是第一步。真正减少首屏阻塞，得让它不走HTTP请求：
- 服务端渲染时，把
home.css内容读取后直接写入<style>标签（注意设置media="print"再用@media all切换，避免FOUC） - 剩余CSS（如
product-detail.css）用rel="preload"或fetch()+insertRule动态注入，避免<link rel="stylesheet">阻塞渲染 - 千万别在
home.less里留占位@import "lazy-components.less"——Less编译器不管“懒”，它照常展开，体积白减
Less不感知加载时机，所有“关键/非关键”划分必须在编译前由人明确界定，且和HTML结构、路由逻辑强绑定。这点最容易被忽略。
