Webpack / React/ Spring Boot: caching bundle.js with https

METTAIBI

In my Spring-Boot/React application, i want to cache bundle.js(1.2Mb). If i run the app with http://(test-envionment-server-url)/myapp, my bundle.js get called from cache (208 B) with HTTP status 304 every time i refresh the page. Until now everything is fine.

But when i use https://(test-envionment-server-url)/myapp, bundle.js is not cached and each time i refresh it gets all 1.2Mb, yet all other images and font get cached.

I am using Tomcat in local, and JBoss 7.0.x in my test environment.

Here is my webpack.config.js

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');

module.exports = {
  cache: true,
  entry: [
    'webpack-dev-server/client?http://localhost:8008',
    'webpack/hot/only-dev-server',
    'babel-polyfill',
    './src/index.js',
  ],
  module: {
    loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel',
    },
    {
      test: /\.(jpe?g|png|gif|svg)$/i,
      loaders: [
        'url?limit=2048',
        'img',
      ],
    },
    {
      test: /\.(woff|woff2|eot|ttf)$/,
      loader: 'url-loader?limit=2048',
    },
    {
      test: /\.scss$/,
      loaders: ['style', 'css', 'postcss-loader', 'sass'],
    },
    ],
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
  output: {
    path:`${__dirname}/(spring-boot-app-url/resources/static`,
    publicPath: '/publicpath/',
    filename: 'bundle.js',
  },
  devServer: {
    port: 8008,
    contentBase: './dist',
    historyApiFallback: true,
    hot: true,
    proxy: {
      .....(proxy config)
    },
  },
},
},
postcss: () => {
  return [autoprefixer];
},
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.DedupePlugin(),
  new webpack.DefinePlugin({
  'process.env': {
    'NODE_ENV': JSON.stringify('production'),
  },
}),
],
};

in my Spring i have some Spring security configuration:

@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity

            .csrf().disable()

            .authorizeRequests()
            .antMatchers(TOKEN_NAME).permitAll() // API
            ...(antMatchers)
            .and()
            .authorizeRequests()
            .antMatchers(TOKEN_BASED_AUTH_ENTRY_POINT).permitAll();

    httpSecurity
            .addFilterBefore(authenticationTokenFilterBean(), UsernamePasswordAuthenticationFilter.class);

    httpSecurity.headers().cacheControl().disable();
}

Here is the Request header from my Network tab:

 Accept:*/*
 Accept-Encoding:gzip, deflate, sdch, br
 Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
 Connection:keep-alive
 Host:*****
 Referer:https://****/appname/
 User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36

Here is the Response header from Network tab:

Accept-Ranges:bytes
Cache-Control:max-age=3600
Connection:keep-alive
Content-Length:1248915
Content-Type:application/javascript; charset=UTF-8
Date:Mon, 05 Dec 2016 12:56:47 GMT
Last-Modified:Mon, 05 Dec 2016 09:08:06 GMT
Server:JBoss-EAP/7
Strict-Transport-Security:max-age=31536000 ; includeSubDomains
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-Powered-By:Undertow/1
X-XSS-Protection:1; mode=block

When i run it with http url, the header request doesn't have any cache control. Any idea about how to cache bundle.js file even when i run my app using https?

Thank you

Brian Clozel

Given the provided HTTP response, it seems your server is not sending the appropriate Cache-Control headers. Doing so can cause issues when you're changing the contents of your static resource.

This is why you should:

  • configure a Cache-Control header to be sent when serving static resources
  • configure a resource chain with a content strategy (see here)

The overall configuration for your production profile should look like:

spring.resources.cache-period=3600 # caching resources for 1 hour
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to generate bundle.js with react and webpack?

From Dev

React, Webpack: bundle.js is not generated

From Dev

How to generate bundle.js with react and webpack?

From Dev

Spring Boot, caching with EhCache

From Dev

Spring Boot, caching with EhCache

From Dev

How to serve production react bundle.js built by webpack?

From Dev

Using Webpack with React-router bundle.js Not Found

From Dev

Spring boot and react.js

From Dev

Preloading animation for React webpack bundle

From Dev

webpack bundle.js not found

From Dev

Caching with Webpack, [hash] value inside index source code, using React.js

From Dev

Spring Boot with Gradle and Webpack

From Dev

How to enable browser caching in spring boot

From Dev

How to enable HTTP response caching in Spring Boot

From Dev

Spring boot caching in @Service class does not work

From Dev

Spring Boot Caching with Redis - Deserialisation issue

From Dev

React webpack bundle not utf-8

From Dev

React with Webpack: PropTypes appearing in final bundle

From Dev

webpack to bundle code targeting node.js

From Dev

Webpack: can't find bundle.js

From Dev

Generating bundle.js with webpack & gulp

From Dev

Webpack doesn't generate bundle.js

From Dev

Webpack js bundle gets loaded but not executed

From Dev

Spring Boot redirect HTTP to HTTPS

From Dev

Webpack and React.js

From Dev

CDN caching for React.JS SSR

From Dev

Prevent caching index.html file using spring-boot

From Dev

Prevent caching index.html file using spring-boot

From Dev

webpack including react 0.14-beta2 twice in final bundle