reactjs - 为什么在路由级别应用拆分仍然需要整个 bundle.js 文件？

Question

我仍然无法解决这个问题。我可能做错了什么。

我使用动态导入语法在路由级别（react-router-4 ）拆分了我的应用程序。捆绑包被分块用于较小的文件（每个文件都包含单个路由），并且它们是异步加载的。问题是，即使它被拆分，应用程序仍然请求并加载整个bundle.js文件：

     0.b50665ddb9caa794e97e.js   965 kB       0  [emitted]  [big]  
     1.c557a0622931c141e2ee.js   221 kB       1  [emitted]         
     2.b5c41d2de3e6395700d9.js  9.05 kB       2  [emitted]         
bundle.fd19428ab3151be11c7a.js   3.6 MB       3  [emitted]  [big]  bundle
                     style.css  21.8 kB       3  [emitted]         bundle
                    index.html  2.01 kB          [emitted] 

我的 webpack 配置如下：

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const VENDOR_LIBS = [
  'react', 'react-dom',
  'react-fontawesome',
  'react-redux',
  'react-router',
  'recharts',
  'redux',
  'redux-thunk',
  'axios',
  'babel-polyfill',
];

const config = {
  entry: {
    bundle: './src/index.js',
    vendor: VENDOR_LIBS
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        loader: 'babel-loader',
        exclude: /node_modules/,
        test: /\.js$/,
        query: {
          plugins: ['transform-runtime'],
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        loaders: ['style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[local]___[hash:base64:4]!sass-loader?sourceMap'],
        test: /(styles\.sass)$/
      },
      {
        loader: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader!sass-loader"
        }),
        test: /(application.sass)$/
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: { limit: 40000 }
          },
          'image-webpack-loader?{}'
        ]
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        loaders: ['style-loader', 'css-loader']
      }
    ]
  },
  node: {
    fs: "empty",
    net: "empty",
    dns: "empty"
  },
  devServer: {
    historyApiFallback: true
  },
  plugins: [
    new ExtractTextPlugin('style.css'),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      async: true,
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
    }),
  ]
};

module.exports = config;

提前感谢您的帮助。:)

// 编辑

所以我组成了我所有的 13 条路线。这是输出：

     8.8a79268f04b9c42a04c0.js   224 kB       8  [emitted]         
     0.9cb666849d998aa4188c.js  1.11 MB       0  [emitted]  [big]  
     2.66db3b384c54d562a6af.js   936 kB       2  [emitted]  [big]  
     3.839b76b7e6fa0e65843f.js   335 kB       3  [emitted]  [big]  
     4.d6f21bdadc274b1050c7.js   297 kB       4  [emitted]  [big]  
     5.2e9d542b1923eecf17f9.js   242 kB       5  [emitted]         
     6.41769ae40fea916e2846.js   243 kB       6  [emitted]         
     7.b0aaa53d5665a9b7162f.js   242 kB       7  [emitted]         
     1.ad41e6983002b90f9116.js   869 kB       1  [emitted]  [big]  
     9.7c54c61ee64fbe8357fc.js  99.4 kB       9  [emitted]         
    10.b95f217e8602aa4f0762.js  90.4 kB      10  [emitted]         
    11.fec87d07731569740d96.js   133 kB      11  [emitted]         
    12.4e6ff6abecef8311d153.js  4.69 kB      12  [emitted]         
bundle.6b0bbc0e63449de93ddf.js  1.01 MB      13  [emitted]  [big]  bundle
vendor.71438b5cd576c98978b3.js   715 kB      14  [emitted]  [big]  vendor
                     style.css  21.8 kB      13  [emitted]         bundle
                    index.html  2.09 kB          [emitted]    

为了比较，我评论了一些路由和异步加载的组件，这是输出：

                         Asset     Size  Chunks                    Chunk Names
     0.4820b11bd5c307396aaa.js   242 kB       0  [emitted]         
     1.386b1b1e2a78ab016aaf.js  99.4 kB       1  [emitted]         
     2.fd099c57a7f2fe91a220.js  4.69 kB       2  [emitted]         
bundle.62712758d7ba025b716c.js     1 MB       3  [emitted]  [big]  bundle
vendor.7fc364f5f9b15c408351.js   715 kB       4  [emitted]  [big]  vendor
                     style.css  21.8 kB       3  [emitted]         bundle
                    index.html  2.09 kB          [emitted]   

Bundle.js 文件似乎仍然是相同的大小......

另外，添加了 .babelrc 文件：

{
  "plugins" : ["syntax-dynamic-import"]
}

标签： reactjswebpacksplitrouter