Я до сих пор не могу найти решение для этого.Возможно, я что-то не так делаю.
Я разделил свое приложение на уровне маршрута ( реагирующий маршрутизатор-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]
Моя конфигурация веб-пакета следующая:
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;
Заранее спасибо за помощь.:)
// edit
Итак, я составил все свои 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"]
}