使用 webpack 和 react router 动态加载 javascript chunk

Question

我已经使用 react router 和 webpack 将代码拆分为 shared.js、bundle.min.js 和 1.chunk.js 以及页面的 getComponents 和 require.ensure api ，从“/”说“/about”，因为我想增加主页的初始加载时间。如果我将 index.html 和那些 js 放入名为 public 的单个文件夹中并在 html.[=14 中声明脚本 shared.js、bundle.min.js，它在开发环境中运行良好=]

我想知道如果我打算将所有 javascript 文件部署到 CDN（例如 cloudfront）上，javascript 如何加载正确的块。对于 bundle.min.js 和 shared.js，我可以简单地将 CDN url 放在 html 中，因为任何页面都需要这些。但是我怎么让它知道1.chunk.js CDN url 什么时候需要呢？ html 中是否存在捆绑文件名和实际 url（如 CDN url）之间的声明映射？否则我看不到它如何加载 1.chunk.js.

基本上我的服务器回复 index.html 所有 url 请求，如 example.com 或示例。com/about。反应路由器会处理其他一切。

我的 html 代码是这样的：

<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>

我的路由文件是：

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;

和用于部署的 webpack 配置文件：

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()
  ]
}

Answer 1

output.publicPath 将完成这项工作。

最终配置会变成

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

参考：https://webpack.github.io/docs/configuration.html#output-publicpath

使用 webpack 和 react router 动态加载 javascript chunk

Dynamically load javascript chunk with webpack and react router

javascript

node.js

reactjs

webpack

react-router