欢迎进入Wiki » FAQ » 生产环境下如何替换 js、css 等静态资源?

生产环境下如何替换 js、css 等静态资源?

在2015-04-13 14:40上被李小翔修改
评论 (0) · 附件 (0) · 记录 · 信息

默认情况下,工程打包(g war)部署后,asset-pipeline 插件会自动将所有静态资源(js、css、图片等)打包、压缩后部署在应用解压目录的 assets 文件夹下面,以提示性能。

但是与此同时又带来了一个问题,如果要更新一个 js /css 文件,直接修改或者替换 assets 文件夹下的同名文件不起作用。原因是 asset-pipeline 会根据指令自动将多个css或js文件编译、压缩、打包成一个文件,并且在给每个静态资源文件名添加一个hash码以充分利用浏览器缓存来提升性能。

因此,如果要修改某段代码或者替换图片的话,可以采用下面的步骤。

图片资源相对比较简单,一般来说可以直接替换 assets 文件夹下的在相同路径下的同名文件,以及带有hash后缀的同名文件,如:

error-d8f8fc0060d4abdd614ce593f56bcaaf.gif
error.gif

但是采用这种方式的话,如果浏览器中有缓存,替换不会马上生效。此时,可以采用下面的方式:

  1. 重新打个war包,生成新的资源文件,hash后缀会发生变化,如 error-foobar.gif
  2. 将新的资源上传到生产环境
  3. 在 console 中运行下面的代码即可:
    config.grails.assets.manifest.setProperty("error.gif", "error-foobar.gif")

js/css 资源一般都会打包,因此,需要先找到修改的代码会被打包在哪个文件中(直接查看生产环境页面的源码,或者F12简单跟一下),常见的 js 包有 js_main.js、js_portal.js,常见的 css 包有 css_main.css、css_portal.css、css_list.css、css_form*.css 等。

以修改工程中的 application.js 为例,它会被包含在 js_main.js 和 js_portal.js 中:

  1. 重新打个war包,生成新的资源文件,如 js-main-foobar.js、js-portal-foobar.js
  2. 将新的资源上传到生产环境
  3. 在 console 中运行下面的代码后,刷新页面即可:
    config.grails.assets.manifest.setProperty("js-main.js", "js-main-foobar.js")
    config.grails.assets.manifest.setProperty("js-portal.js", "js-portal-foobar.js")

虽然上面的方法不是很方便,但也算是性能和易用性之间的一种妥协吧,毕竟这种情况并不多。

标签: BroFramework
在2015-04-13 14:40上被李小翔创建

Copyright © 2013 北京博瑞开源软件有限公司
京ICP备12048974号