cache sprites and fix images caching (#9422)

gulp/gulp-sprites.js

@@ -11,7 +11,7 @@ import {each} from 'lodash';
 // https://github.com/Ensighten/grunt-spritesmith/issues/67#issuecomment-34786248
 const MAX_SPRITESHEET_SIZE = 1024 * 1024 * 3;
 
-const IMG_DIST_PATH = 'website/static/sprites/';
+const IMG_DIST_PATH = 'website/client/assets/images/sprites/';
 const CSS_DIST_PATH = 'website/client/assets/css/sprites/';
 
 function checkForSpecialTreatment (name) {

webpack/webpack.base.conf.js

@@ -83,7 +83,7 @@ const baseConfig = {
         loader: 'url-loader',
         query: {
           limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]'),
+          name: utils.assetsPath('images/[name].[hash:7].[ext]'),
         },
       },
       {

website/client/app.vue

@@ -359,4 +359,26 @@ export default {
 <style src="intro.js/minified/introjs.min.css"></style>
 <style src="bootstrap/scss/bootstrap.scss" lang="scss"></style>
 <style src="assets/scss/index.scss" lang="scss"></style>
-<style src="assets/css/index.css"></style>
+<style src="assets/css/sprites/spritesmith-largeSprites-0.css"></style>
+<style src="assets/css/sprites/spritesmith-main-0.css"></style>
+<style src="assets/css/sprites/spritesmith-main-1.css"></style>
+<style src="assets/css/sprites/spritesmith-main-2.css"></style>
+<style src="assets/css/sprites/spritesmith-main-3.css"></style>
+<style src="assets/css/sprites/spritesmith-main-4.css"></style>
+<style src="assets/css/sprites/spritesmith-main-5.css"></style>
+<style src="assets/css/sprites/spritesmith-main-6.css"></style>
+<style src="assets/css/sprites/spritesmith-main-7.css"></style>
+<style src="assets/css/sprites/spritesmith-main-8.css"></style>
+<style src="assets/css/sprites/spritesmith-main-9.css"></style>
+<style src="assets/css/sprites/spritesmith-main-10.css"></style>
+<style src="assets/css/sprites/spritesmith-main-11.css"></style>
+<style src="assets/css/sprites/spritesmith-main-12.css"></style>
+<style src="assets/css/sprites/spritesmith-main-13.css"></style>
+<style src="assets/css/sprites/spritesmith-main-14.css"></style>
+<style src="assets/css/sprites/spritesmith-main-15.css"></style>
+<style src="assets/css/sprites/spritesmith-main-16.css"></style>
+<style src="assets/css/sprites/spritesmith-main-17.css"></style>
+<style src="assets/css/sprites/spritesmith-main-18.css"></style>
+<style src="assets/css/sprites/spritesmith-main-19.css"></style>
+<style src="assets/css/sprites/spritesmith-main-20.css"></style>
+<style src="assets/css/sprites.css"></style>

website/client/assets/css/index.css

@@ -1,2 +0,0 @@
-@import './sprites/*.css';
-@import './sprites.css';

website/client/assets/css/sprites/spritesmith-largeSprites-0.css

@@ -1,23 +1,23 @@
 .promo_armoire_backgrounds_201711 {
-  background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: 0px -221px;
   width: 141px;
   height: 441px;
 }
 .promo_batch_tasks {
-  background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: 0px 0px;
   width: 362px;
   height: 220px;
 }
 .promo_push_top_bottom {
-  background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: -363px 0px;
   width: 360px;
   height: 219px;
 }
 .promo_take_this {
-  background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: -142px -221px;
   width: 114px;
   height: 87px;

website/client/assets/css/sprites/spritesmith-main-20.css

@@ -1,341 +1,341 @@
 .Pet-Unicorn-Zombie {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -82px 0px;
   width: 81px;
   height: 99px;
 }
 .Pet-Whale-Base {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: 0px -400px;
   width: 81px;
   height: 99px;
 }
 .Pet-Whale-CottonCandyBlue {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -164px 0px;
   width: 81px;
   height: 99px;
 }
 .Pet-Whale-CottonCandyPink {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: 0px -100px;
   width: 81px;
   height: 99px;
 }
 .Pet-Whale-Desert {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -82px -100px;
   width: 81px;
   height: 99px;
 }
 .Pet-Whale-Golden {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -164px -100px;
   width: 81px;
   height: 99px;
 }
 .Pet-Whale-Red {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -246px 0px;
   width: 81px;
   height: 99px;
 }
 .Pet-Whale-Shade {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -246px -100px;
   width: 81px;
   height: 99px;
 }
 .Pet-Whale-Skeleton {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: 0px -200px;
   width: 81px;
   height: 99px;
 }
 .Pet-Whale-White {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -82px -200px;
   width: 81px;
   height: 99px;
 }
 .Pet-Whale-Zombie {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -164px -200px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Aquatic {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -246px -200px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Base {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -328px 0px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-CottonCandyBlue {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -328px -100px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-CottonCandyPink {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -328px -200px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Cupid {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: 0px -300px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Desert {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -82px -300px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Ember {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -164px -300px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Fairy {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -246px -300px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Floral {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -328px -300px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Ghost {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -410px 0px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Golden {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -410px -100px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Holly {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -410px -200px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Peppermint {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -410px -300px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Red {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -492px 0px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-RoyalPurple {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -492px -100px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Shade {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -492px -200px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Shimmer {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -492px -300px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Skeleton {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: 0px 0px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Spooky {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -82px -400px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Thunderstorm {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -164px -400px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Veteran {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -246px -400px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-White {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -328px -400px;
   width: 81px;
   height: 99px;
 }
 .Pet-Wolf-Zombie {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -410px -400px;
   width: 81px;
   height: 99px;
 }
 .Pet_HatchingPotion_Aquatic {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: 0px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Base {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -574px -138px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_CottonCandyBlue {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -69px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_CottonCandyPink {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -138px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Cupid {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -207px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Desert {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -276px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Ember {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -345px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Fairy {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -414px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Floral {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -483px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Ghost {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -574px 0px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Golden {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -574px -69px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Holly {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -492px -400px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Peppermint {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -574px -207px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Purple {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -574px -276px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Red {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -574px -345px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_RoyalPurple {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -574px -414px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Shade {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -574px -483px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Shimmer {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: 0px -569px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Skeleton {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -69px -569px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Spooky {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -138px -569px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Thunderstorm {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -207px -569px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_White {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -276px -569px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Zombie {
-  background-image: url(/static/sprites/spritesmith-main-20.png);
+  background-image: url('~assets/images/sprites/spritesmith-main-20.png');
   background-position: -345px -569px;
   width: 68px;
   height: 68px;

website/raw_sprites/css/css.template.handlebars

@@ -1,13 +1,13 @@
 {{#sprites}}
 .{{name}} {
-  background-image: url(/static/sprites/{{{escaped_image}}});
+  background-image: url('~assets/images/sprites/{{{escaped_image}}}');
   background-position: {{px.offset_x}} {{px.offset_y}};
   width: {{px.width}};
   height: {{px.height}};
 }
 {{#if custom}}
 .customize-option.{{name}} {
-  background-image: url(/static/sprites/{{{escaped_image}}});
+  background-image: url('~assets/images/sprites/{{{escaped_image}}}');
   background-position: {{custom.px.offsetX}} {{custom.px.offsetY}};
   width: {{custom.px.width}};
   height: {{custom.px.height}};

website/server/middlewares/static.js

@@ -10,7 +10,7 @@ module.exports = function staticMiddleware (expressApp) {
   // Expose static files for new client
   expressApp.use('/static/js', express.static(`${BASE_DIR}/dist-client/static/js`, { maxAge: MAX_AGE }));
   expressApp.use('/static/css', express.static(`${BASE_DIR}/dist-client/static/css`, { maxAge: MAX_AGE }));
-  expressApp.use('/static/img', express.static(`${BASE_DIR}/dist-client/static/img`, { maxAge: MAX_AGE }));
+  expressApp.use('/static/images', express.static(`${BASE_DIR}/dist-client/static/images`, { maxAge: MAX_AGE }));
 
   // @TODO img/js/css under /static have their names hashed after every change so they can be cached
   // Not files in /audio and /sprites, that's why we don't cache them.