CODEWITHSUNDEEP
javascriptnode.jsreactjswebpackreact-router
Egoist_sx
Egoist_sx

Reputation: 339

Dynamically load javascript chunk with webpack and react router

I have used react router and webpack to split code into shared.js, bundle.min.js, and 1.chunk.js with getComponents and require.ensure api for a page, say "/about", from "/" because I want to boost initial loading time for homepage. It's working well in development setting if I put index.html and those js into single folder called public and declare scripts shared.js, bundle.min.js in html.

I am wondering how it is possible for javascript to load correct chunk if I intent to deploy all javascript files on CDN such as cloudfront. I can simply puts CDN url in html for bundle.min.js and shared.js because those are required for any page. But how could I let it know 1.chunk.js CDN url when it needs it? Is there a thing like declarative mapping between bundled file name and actual url (like CDN url) in html? Otherwise I don't see how can it load 1.chunk.js.

Basically my server reply index.html for all url requested like example.com or example.com/about. And react router take care of everything else.

My html code is like:

<html>
  <body>
    <div id="container"></div>
    <script src="http://xxxxCDN.net/common.js"></script>
    <script src="http://xxxxCDN.net/bundle.min.js"></script>
  </body>
</html>

and my routing file is:

import Router, {Route, IndexRoute} from "react-router"
import React from 'react';
import App from "../components/App"
import HomePage from "../components/pages/HomePage"
import LoginPage from "../components/pages/LoginPage"
import SignupPage from "../components/pages/SignupPage"
//import AboutPage from "../components/pages/AboutPage"
import GuidePage from "../components/pages/GuidePage"
import SearchPage from '../components/pages/SearchPage'
import ProfilePage from '../components/pages/ProfilePage'
import HomeDetailPage from '../components/pages/HomeDetailPage'
import OrderDetailPage from "../components/pages/OrderDetailPage"

const routes = <Route path='/' component={App}>
  <IndexRoute component={HomePage}/>
  <Route path="login" component={LoginPage}/>
  <Route path="signup" component={SignupPage}/>
  <Route path="search" component={SearchPage}/>
  <Route path="guide" component={GuidePage}/>
  <Route path="about" getComponent={(location, cb) => {
    require.ensure([], (require) => {
      cb(null, require('../components/pages/AboutPage'))
    })
  }}/>
  <Route path="profile" component={ProfilePage}/>
  <Route path="home" component={HomeDetailPage}/>
  <Route path="order" component={OrderDetailPage}/>
</Route>;

export default routes;

and webpack config file for deployment:

var webpack = require('webpack');

module.exports = {
  entry: [
    './src/app.jsx'
  ],
  output: {
    path: './dist',
    filename: 'bundle.min.js',
    chunkFilename: '[id].chunk.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV: JSON.stringify("production")
      }
    }),
    new webpack.optimize.UglifyJsPlugin()
  ]
}

Upvotes: 3

Views: 4664

Answers (1)

Jibin George
Jibin George

Reputation: 146

output.publicPath will do the job.

final configuration will become 

module.exports = {
   .....,
   output: {
    path: './dist',
    filename: 'bundle.min.js',
    chunkFilename: '[id].chunk.js',
    publicPath: "http://xxxxCDN.net/"
  },
  .....
}

ref: https://webpack.github.io/docs/configuration.html#output-publicpath

Upvotes: 2

Related Questions