動態加載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和反應路由器

回答

相關問題