我用Redux创建了React项目,它没有很多代码,但是我想使用延迟加载并使用System.import函数来排除chunk,但不幸的是它没有排除文件
这是我的React Router,其中包含System.import
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,
path: '/',
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);
}
}
]
};
注意
我没有警告或错误,只是警告我的代码对于UX来说太大了
CONFIG
这是我的webpack.config.js
let webpack = require('webpack');
let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
var DefinePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false')),
process: {
env: {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
}
}
});
let isProd = process.env.NODE_ENV == 'production';
module.exports = {
context: __dirname,
devtool: 'inline-source-map',
entry: {
bundle: './src/app/app-client.jsx',
styles: './src/app/sass/main.scss',
vendor: ['react', 'react-dom']
},
output: {
filename: '[name].js',
chunkFilename: '[name].[chunkhash].js',
path: './src/build',
},
resolve: {
extensions: ['.js', '.jsx']
},
module : {
rules : [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(['css-loader','sass-loader'])
},
{
test: /\.jsx?$/,
exclude: [/node_modules/, /libs/],
use: {
loader: "babel-loader",
query: {
presets: [['es2015', { modules: false }], 'react', 'stage-2' ],
plugins: [ "transform-runtime" ]
}
}
},
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
use: {
loader:'file-loader'
}
}
]
},
plugins: [
DefinePlugin,
new ExtractTextPlugin('[name].css'),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: "[name].js",
minChunks: Infinity
}),
]
}