react-dom 大大增加了 webpack 包的大小
react-dom blowing out webpack bundle size MASSIVELY
这一定是我遇到过的最奇怪的 webpack 问题之一...
查看此捆绑包细分:
反应 116.01KB - 足够公平
react-dom 533.24KB - 真的 WTF
我认为这可能是我的依赖项损坏了,但核对 node_modules 并重新安装没有任何效果。我想这与 webpack 捆绑它的方式有关,但我迷失了主意。我处理 .js 导入的方式非常标准。
// webpack.config.js
const path = require('path');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');
const dashboard = new Dashboard();
module.exports = {
context: path.join(__dirname, 'src'),
entry: {
bundle: './index.js',
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'build'),
},
module: {
rules: [
{
test: /\.html$/,
use: 'file-loader?name=[name].[ext]',
},
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'postcss-loader',
],
}),
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
plugins: [
// new BundleAnalyzerPlugin(),
new ExtractTextPlugin('styles.css'),
new DashboardPlugin(dashboard.setData),
],
devServer: {
quiet: true,
},
};
// .babelrc
{
"presets": [
"react",
"es2015"
],
"plugins": ["transform-object-rest-spread"]
}
在插件中添加以下命令以减少导入:
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.DefinePlugin(GLOBALS),
new webpack.optimize.UglifyJsPlugin(),
您应该为生产包创建一个文件或选项以使用此插件
如果您查看 node_modules
文件夹下的相应文件夹,并注意文件大小,您会发现没有什么值得惊讶的:
也就是说,由于 react-dom.js 的大小很大,所以 bundle 的大小明显增加了。
http://elijahmanor.com/react-file-size/
在 v15.4.0 中,react-dom 的文件大小从 1.17kB 增加到 619.05kB。这意味着我的 webpack 设置没有做任何错误的捆绑文件。这个模块之所以变大,是因为代码是从react模块转过来的。
我不得不把我的 webpack.config.js 从
改成
devtool: 'inline-source-map'
到
devtool: 'source-map'
现在它为每个块生成一个更小的 .js + 一个单独的 .js.map 文件。
注意 JS 大小甚至小于 react-dom.production.min.js in node_modules:
这一定是我遇到过的最奇怪的 webpack 问题之一...
查看此捆绑包细分:
react-dom 533.24KB - 真的 WTF
我认为这可能是我的依赖项损坏了,但核对 node_modules 并重新安装没有任何效果。我想这与 webpack 捆绑它的方式有关,但我迷失了主意。我处理 .js 导入的方式非常标准。
// webpack.config.js
const path = require('path');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');
const dashboard = new Dashboard();
module.exports = {
context: path.join(__dirname, 'src'),
entry: {
bundle: './index.js',
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'build'),
},
module: {
rules: [
{
test: /\.html$/,
use: 'file-loader?name=[name].[ext]',
},
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'postcss-loader',
],
}),
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
plugins: [
// new BundleAnalyzerPlugin(),
new ExtractTextPlugin('styles.css'),
new DashboardPlugin(dashboard.setData),
],
devServer: {
quiet: true,
},
};
// .babelrc
{
"presets": [
"react",
"es2015"
],
"plugins": ["transform-object-rest-spread"]
}
在插件中添加以下命令以减少导入:
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.DefinePlugin(GLOBALS),
new webpack.optimize.UglifyJsPlugin(),
您应该为生产包创建一个文件或选项以使用此插件
如果您查看 node_modules
文件夹下的相应文件夹,并注意文件大小,您会发现没有什么值得惊讶的:
也就是说,由于 react-dom.js 的大小很大,所以 bundle 的大小明显增加了。
http://elijahmanor.com/react-file-size/
在 v15.4.0 中,react-dom 的文件大小从 1.17kB 增加到 619.05kB。这意味着我的 webpack 设置没有做任何错误的捆绑文件。这个模块之所以变大,是因为代码是从react模块转过来的。
我不得不把我的 webpack.config.js 从
改成devtool: 'inline-source-map'
到
devtool: 'source-map'
现在它为每个块生成一个更小的 .js + 一个单独的 .js.map 文件。
注意 JS 大小甚至小于 react-dom.production.min.js in node_modules: