Reactjs React项目上System.import的树震动和延迟加载的Webpack 2配置

我是Webpack2的新手，它是延迟加载，到目前为止，我已经创建了一个没有延迟加载和代码拆分的项目，但是现在我想将我的代码拆分成块，并使用React Router的系统导入。我已经根据文章创建了React路由器部分

此网页包2配置文件位于下面

let webpack = require('webpack');
let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');

var devFlagPlugin = new webpack.DefinePlugin({
    __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false')),
    'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
    }
});

let extractSCSS = new ExtractTextPlugin('[name].css')

module.exports = {
    context: __dirname,
    entry: {
        bundle: './src/app/app-client.jsx',
        styles: './src/app/sass/main.scss',
        vendor: [
            'react', 'react-dom'
        ]
    },
    output: {
        filename: '[name].js',
        chunkFilename: 'chunk.[id].[chunkhash:8].js',
        path: './src/build',
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    devtool: 'cheap-module-source-map',
    module : {
        rules : [
            {
                test: /\.scss$/,
                loader: extractSCSS.extract(['css-loader','sass-loader'])
            },
            {
                test: /\.jsx?$/,
                exclude: [/node_modules/, /libs/],
                use: {
                    loader: "babel-loader",
                    query: {
                        presets: ['es2015', 'react', 'stage-2' ],
                        plugins: [ "transform-runtime" ]
                    }
                }
            },
            {
                test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
                use: {
                    loader:'file-loader'
                }
            }
        ]
    },
    plugins: [
        extractSCSS,
        devFlagPlugin,
        new webpack.optimize.CommonsChunkPlugin({
            name: 'bundle',
            children: true,
            async: true,
            minChunks: 2
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            children: true,
            async: true,
            minChunks: 2
        })
    ]
}

但webpack只创建了两个文件，供应商和包，而且在我分离React和React DOM之后，包的大小并没有减小

这是我的路线

import App from './App.jsx';

function errorLoading(err) {
  console.error('Dynamic page loading failed', err);
}

function loadRoute(cb) {
  return (module) => cb(null, module.default);
}

export default {
  component: App,
  childRoutes: [
    {
      path: 'stock/info/:symbol(/:tab)',
      getComponent(location, cb) {
        System.import('./StockPage')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
    {
      path: '*',
      getComponent(location, cb) {
        System.import('./NoMatch')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    }
  ]
};

我的应用程序运行，但延迟加载当然不起作用，因为我在

System.import中没有模块块

请帮助我为我的应用程序的性能创建正确的网页包配置！
提前感谢，如果有什么是胡说八道的话，请原谅，因为我是webpack的新手。
Webpack2从System.import（）切换到import（），以匹配当前建议的javascript功能。现在正处于第三阶段

因此，您应该能够更改您的网页配置，以包括第三阶段

{
            test: /\.jsx?$/,
            exclude: [/node_modules/, /libs/],
            use: {
                loader: "babel-loader",
                query: {
                    presets: ['es2015', 'react', 'stage-2', 'stage-3' ],
                    plugins: [ "transform-runtime" ]
                }
            }
},

或者动态导入插件

{
            test: /\.jsx?$/,
            exclude: [/node_modules/, /libs/],
            use: {
                loader: "babel-loader",
                query: {
                    presets: ['es2015', 'react', 'stage-2' ],
                    plugins: [ "transform-runtime", "syntax-dynamic-import"]
                }
            }
},

然后改变你的路线

export default {
  component: App,
  childRoutes: [
  {
    path: 'stock/info/:symbol(/:tab)',
    getComponent(location, cb) {
      import('./StockPage')
        .then(loadRoute(cb))
        .catch(errorLoading);
    }
  },
  {
    path: '*',
    getComponent(location, cb) {
    import('./NoMatch')
      .then(loadRoute(cb))
      .catch(errorLoading);
    }
  }
]
};

有关使用导入进行代码拆分和延迟加载的完整文档，请参见此处的webpack2帮助页面。

要启用Webpack2树抖动，只需对babel设置进行一次更改

presets: ['es2015', 'react', 'stage-2' ],

变成

presets: [['es2015', { modules: false }], 'react', 'stage-2' ],

这是我从以下网站了解到的关于树划的文章：
这是在webpack 2中使用动态导入的正确方法。实际上，对于webpack，您需要转换import（）语句，而不是babel插件语法动态导入。babel插件语法dynamic import只允许babel解析动态导入，但不转换它们。@对于WebPack V1可能是这样，但WebPack 2现在本机支持ES6 import和import（）函数。@DanielD Hmm这很奇怪。对于我来说，如果没有这个插件，它会失败，因为带有构造函数“node”

的

未知节点类型为“Import”，带有Webpack2.2.0。但使用动态导入网页包，效果很好。