路由組塊是按照每塊

Question

在我的WebPack我用的外部其中有反應，陣營大教堂，終極版等

現在，當我實現我的路由組塊捆綁外部腳本，這是重新生成每塊再次捆綁外部腳本，所以最終我的包的大小非常巨大。

如何避免我的個別塊不重新捆綁外部腳本並從外部使用它們。

編輯

使用https://chrisbateman.github.io/webpack-visualizer/我可以看到我所有的塊被捆綁共同庫 - 這是實際上應該在的WebPack來自externals。

EDIT 2個

的WebPack文件

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 

    entry: ['./src/containers/AppContainer', './src/index'], 

    devtool: 'cheap-module-source-map', 

    output: { 
    path: __dirname + '/dist', 
    publicPath: 'public/', 
    filename: 'bundle.js', 
    chunkFilename: '[name].[id].chunk.[chunkhash].js', 
    libraryTarget: 'umd' 
    }, 

    target: 'web', 

    externals: { 
    antd: 'antd', 
    react: 'react', 
    'react-dom': 'react-dom', 
    'react-router': 'react-router', 
    redux: 'redux', 
    'react-redux': 'react-redux', 
    immutable: 'immutable', 
    }, 

    resolve: { 
    modules: [ 
     path.join(__dirname, '../node_modules') 
    ], 
    extensions: ['.js', '.jsx', '.json'], 
    alias:{ 
     constants: path.resolve(__dirname, './src/constants'), 
     actions: path.resolve(__dirname, './src/actions'), 
     styles: path.resolve(__dirname, './src/styles'), 
     utils: path.resolve(__dirname, './src/utils') 
    } 
    }, 

    resolveLoader: { 
    modules: [ 
     path.join(__dirname, '../node_modules') 
    ] 
    }, 

    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify('production') 
     } 
    }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false 
     }, 
     comments: false 
    }) 
    ] 

    module: { 
    loaders: [ 
     { 
     test: /\.(js|jsx)$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     options: { 
      // Ignore local .babelrc files 
      babelrc: false, 
      presets: [ 
      ['es2015', { modules: false }], 
      'react' 
      ], 
      plugins: [ 
      'react-html-attrs', 
      'transform-class-properties', 
      'transform-decorators-legacy', 
      'transform-object-rest-spread', 
      [ 
       'import', { 
       libraryName: 'antd' 
       } 
      ] 
      ] 
     } 
     }, 
     { test: /\.png$/, loader: 'file-loader' }, 
     { 
     test: /\.s?css$/i, 
     use: [ 
      'style-loader', 
      'css-loader' 
     ] 
     }, 
     { 
     test: /\.s?less$/i, 
     exclude:'/node_modules/', 
     use: [ 
      'style-loader', 
      'css-loader', 
      'less-loader' 
     ] 
     }, 
     { 
     test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
     loader: 'url-loader', 
     options: { 
      limit: 100000 
     } 
     }, 
     { 
     test: /\.eot\?iefix$/, 
     loader: 'url-loader', 
     options: { 
      limit: 100000 
     } 
     }, 
     { 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: 'eslint-loader', 
     exclude: /node_modules/, 
     options: { 
      configFile: './eslint/.eslintrc', 
      failOnWarning: false, 
      failOnError: false 
     } 
     } 
    ] 
    } 
}; 

routes文件

import React from 'react'; 
import { Route, IndexRoute } from 'react-router'; 

export default (
    <Route path='/base/' 
    getComponent={ (location, callback) => { 
     require.ensure([], function (require) { 
     callback(null, require('./containers/AppContainer').default); 
     }); 
    } }> 

    <Route path='/route1' 
     getComponent={ (location, callback) => { 
     require.ensure([], function (require) { 
      callback(null, 
      require('./containter1') 
      .default); 
     }); 
     } } 
    /> 

    <Route path='/route2' 
     getComponent={ (location, callback) => { 
     require.ensure([], function (require) { 
      callback(null, 
      require('./container2') 
      .default); 
     }); 
     } } 
    /> 

    <Route path='/route3' 
     getComponent={ (location, callback) => { 
     require.ensure([], function (require) { 
      callback(null, 
      require('./container3') 
      .default); 
     }); 
     } } 
    /> 
    </Route> 
); 

Answer 1

試圖改變你的外部部分是這樣的：

externals: { 
    React: require.resolve('react'), 
    'window.React': require.resolve('react'), 
    ReactDOM: require.resolve('react-dom'), 
    'window.ReactDOM': require.resolve('react-dom') 
} 

此外，從您的代碼中刪除import React from 'react'。只需使用React。

編輯

道歉，我編輯了我的答案。剛剛意識到我的錯誤。我改變了代碼。你的外部關鍵字將是全局變量的名稱。通常將它放在窗口對象內部也更安全