ルートチャンクが、私は私が私のルートチャンクを実装する際に今ドム、再来など</p> <p>反応し、反応させてい<strong>外観</strong>を使用していた私のWebPACKで

Question

すべてのチャンクに再生成されたすべてのチャンクを外部スクリプトをバンドルしています - 外部スクリプトを再度バンドルするので、最終的にバンドルのサイズは非常に大きくなります。

個々のチャンクが外部スクリプトを再バンドルして外部から使用しないようにするにはどうすればよいですか。実際のWebPACKにexternalsから来ることになっているされている - 私はすべての私の塊が共通のLIBSにバンドルされていることがわかりますhttps://chrisbateman.github.io/webpack-visualizer/を使用

EDIT

。

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 
     } 
     } 
    ] 
    } 
}; 

ルートは、このようなあなたの外観のセクションを変更してみ

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を使用してください。

編集

謝罪、私は私の答えを編集しました。私の間違いを実感しました。私はコードを変更しました。あなたの外部の中のキーは、グローバル変数の名前になります。通常はウィンドウオブジェクト内に置く方が安全です