Question

我仍然无法获得解决方案。我可能做错了。

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

＆＃13;

     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]

＆＃13;

我的webpack配置如下：

＆＃13;

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;

提前感谢您的帮助。：）

//编辑

所以我编写了所有13条路线。这是输出：

＆＃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]

＆＃13;

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

＆＃13;

                         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]

＆＃13;

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

另外，添加.babelrc文件：

＆＃13;

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

＆＃13;

为什么在路由级应用程序上拆分仍然请求整个bundle.js文件？

0 个答案: