如何在使用Stencil Utils的BigCommerce站点压缩JS和CSS文件

BigCommerce的Stencil框架不是没有内置压缩，只是默认配置藏得比较深，结合Stencil-Utils主题的结构，按下面的步骤操作就能搞定，不用额外装复杂的构建工具：

1. 优先用Stencil CLI原生压缩能力（无额外成本） #

• 主题开发完成准备上线时，不要直接执行stencil push上传，先在本地主题根目录跑stencil bundle命令，CLI会自动触发生产环境打包流程：自动对JS做uglify压缩混淆、对CSS做去注释、删冗余规则、合并重复选择器，同时自动剔除模板里没有引用到的无效资源
• 检查主题根目录下的config.stencil.json文件，确认minify配置项没有被手动改成false——很多人本地调试的时候为了方便查报错会关这个配置，上线前忘改回来就会导致资源全是未压缩版本
• 打包生成的zip文件在后台上传时，不要勾选「保留未压缩资源用于调试」的选项，不然平台会跳过主题资源的二次压缩流程

2. Stencil-Utils主题专属适配调整 #

Stencil-Utils的资源识别逻辑和普通Stencil主题有小差异，自己加的自定义资源要按规则放才会被压缩流程扫到：

• 自己写的全局JS、CSS不要直接丢在assets/js、assets/css根目录硬写相对路径引用，要放到assets/js/theme、assets/css/theme对应模块目录下，在模板文件里通过Stencil自带的{{cdn}}助手函数引用，才会被纳入打包压缩范围
• 第三方功能脚本（比如统计、营销弹窗、客服插件）不要直接插第三方外链地址，把源文件下载到本地主题资源目录再引用，打包时会自动压缩这部分资源，还能走BigCommerce官方CDN缓存，比引第三方外链加载速度快很多
• Stencil-Utils自带的工具库本身已经提供了压缩好的生产版本，检查assets/js/theme/common目录下的引用路径，确认引入的是stencil-utils.min.js而不是未压缩的开发版就行，不用重复压缩这个核心文件，不然容易破坏内部变量映射导致交互报错

3. 平台层压缩配置（不用改主题代码） #

• 进到后台Store Setup > 高级设置 > 站点性能页，开启「自动压缩HTML/CSS/JS资源」开关，平台边缘CDN节点会自动对输出的资源做Gzip/Brotli压缩，这层压缩和本地打包的压缩不冲突，开启后资源体积还能再降60%左右
• 同页面开启「同类型资源合并」选项，平台会自动把零散的CSS、JS请求合并成更少的请求，降低请求开销，开启后记得清空主题缓存和浏览器缓存，避免旧资源加载异常
• 如果用Script Manager添加自定义脚本，添加时勾选「页脚加载」+「自动压缩脚本内容」选项，后台会自动把你粘贴的自定义脚本去掉空行、注释后再输出，不会把冗余内容吐给前端

4. 常见踩坑点 #

• 不要拿第三方在线压缩工具直接处理Stencil-Utils核心文件，很容易压坏函数作用域，导致加购、商品选择、结算这类核心流程报错
• 压缩打包完成后一定要走一遍核心流程测试：加购、提交订单、优惠券领取、移动端导航、弹窗交互，很多人压缩CSS时没注意语法，把媒体查询压坏导致移动端样式错乱
• 如果跑stencil bundle时报压缩错误，直接看控制台输出的报错文件路径，基本都是对应文件里有未闭合的CSS注释、JS语法错误，改完语法重新打包就行

内容的提问来源于stack exchange，提问作者Jimmy Griffith