Как оптимизировать webpack чтобы весил мало собирался быстрее?

Question

[hollanditkzn]

У меня вот примерно сколько занимает времени и сколько весит 1 файл

C:\OpenServer\domains\trainingPortal>npm run webpack

> trainingportal@1.0.0 webpack C:\OpenServer\domains\trainingPortal
> npx webpack --config webpack.config.js

npx: installed 1 in 2.009s
Path must be a string. Received undefined
C:\OpenServer\domains\trainingPortal\node_modules\webpack\bin\webpack.js
clean-webpack-plugin: C:\OpenServer\domains\trainingPortal\public\client has been removed.
Hash: 940de1590a20ee9e0602
Version: webpack 3.10.0
Time: 1907ms
    Asset     Size  Chunks                    Chunk Names
bundle.js  1.05 MB       0  [emitted]  [big]  main
  [84] ./public/js/AuthForm.js 3.58 kB {0} [built]
 [158] (webpack)/buildin/global.js 509 bytes {0} [built]
 [159] (webpack)/buildin/module.js 517 bytes {0} [built]
 [169] (webpack)/buildin/amd-define.js 88 bytes {0} [built]
    + 193 hidden modules

И Вот конфигурация webpack

/* eslint-disable no-undef */
const path = require("path"),
    CleanWebpackPlugin = require('clean-webpack-plugin'),
	webpack = require('webpack');

module.exports = {
	entry: __dirname + "/public/js/AuthForm.js",
	output: {
		filename: "bundle.js",
		path: path.resolve(__dirname + "/public/client")
	},
    plugins: [
    	new CleanWebpackPlugin(['public/client'])
        // new webpack.DefinePlugin({
		// 	'process.env.NODE_ENV': JSON.stringify('production')
		// }),
		// new webpack.optimize.UglifyJsPlugin()
	],
    module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				loader: "babel-loader"
			},
		]
	},
};

И в файле вот примерно такой простенький код

import React from 'react';
import ReactDOM from 'react-dom';
import TextField from 'material-ui/TextField';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

function TextFields() {
    return(
        <div>
            <form>
                <Fields text="Введите логин"/>
                <Fields text="Введите пароль"/>
            </form>
        </div>
    );
}

class Fields extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <MuiThemeProvider>
            <div>
                <TextField
                    hintText={this.props.text}
                />
            </div>
            </MuiThemeProvider>
        );
    }
}

ReactDOM.render(
    <TextFields />,
    document.getElementById('content')
);

Но как бы уменьшить все это хозяйство так я и не понял с webpack

Answer 1

[frammmm]

Define plugin и UglifyJS
Сжимает простой бандл с реактом до ~100kb

Comments

[frammmm]

Антон Спирин, Константа NODE_ENV равная "production" заставляет включать в бандл минифицированные версии react и react-dom. UglifyJS сжимает остальной код.

[frammmm]

new webpack.optimize.UglifyJsPlugin({
	...
}),
new webpack.DefinePlugin({
	"process.env": {
		NODE_ENV: JSON.stringify('production')
	}
})

Флаг "-p" делает тоже самое, что и в этом коде.

[frammmm]

Антон Спирин, пожалуйста, хватит.

Смотрим во внутренности вебпака:

if(argv.p) {
	argv["optimize-minimize"] = true;
	argv["define"] = [].concat(argv["define"] || []).concat("process.env.NODE_ENV=\"production\"");
}

Код для первого аргумента:

var UglifyJsPlugin = require("../lib/optimize/UglifyJsPlugin");
options.plugins.push(new UglifyJsPlugin({ ... }));

Для второго:

var DefinePlugin = require("../lib/DefinePlugin");
options.plugins.push(new DefinePlugin(defineObject));

[Антон Спирин]

frammmm, сыплю голову пеплом. Верно. Беру все свои слова обратно. Я всегда в DefinePlugin NODE_ENV определял а не process.env.NODE_ENV, а продакшн через ключ -p собирал.