动态加载JavaScript块与webpack和反应路由器

我已经使用反应路由器和webpack将代码分成shared.js，bundle.min.js和1.chunk.js与getComponents和require.ensure api的页面，从“/”开始说“/ about”，因为我想提高主页的初始加载时间。如果我将index.html和这些js放入名为public的单个文件夹并在html中声明脚本shared.js，bundle.min.js，它在开发环境中运行良好。动态加载JavaScript块与webpack和反应路由器

我想知道如何加载正确的块，如果我打算在CDN上部署所有的JavaScript文件，如cloudfront。我可以简单地将CDN网址放在html中，用于bundle.min.js和shared.js，因为这些是任何页面所必需的。但是，如何在需要时让它知道1.chunk.js CDN网址？有没有像HTML中的捆绑文件名和实际URL（如CDN网址）之间的声明映射？否则，我不知道它如何加载1.chunk.js。

基本上我的服务器回复index.html所有url请求像example.com或example.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() 
    ] 
}

来源

2015-11-28 Egoist_sx

output.publicPath将做的工作。

最终构造将变得

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

来源

2015-11-29 18:22:11

动态加载JavaScript块与webpack和反应路由器

回答

相关问题