@KnightForce

Webpack 2. Как уменьшить сборку React?

Как в Webpack 2 уменьшить вес сборки. Сейчас 1 мб +/- 200 кб.
Использую CommonsChunkPlugin.

Конфиг:

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


const extractSass = new ExtractTextPlugin({
    filename: "../stylesheets/[name].css",
});

module.exports = {
	devtool: 'source-map',
	context: path.join(__dirname, 'frontend'),
	entry: {
		bundle: "./bundle",
		babelPolyfill: 'babel-polyfill',
		commons: "./commons",
		style: './stylesheets/style.scss'
	},
	output: {
		path: path.join(__dirname, 'public/javascripts'),
		filename: '[name].js',
		publicPath: '/public/',
	},
	
	resolve: {
		modules: [path.resolve(__dirname, "node_modules"), ],
	},
	
	resolveLoader: {
         modules: ["web_loaders", "web_modules", "node_loaders", "node_modules"],
    },

	module: {
	  rules: [
	    {
	    	test: /\.jsx?$/,
	    	exclude: [path.resolve(__dirname, "node_modules")],

	    	include: [path.resolve(__dirname, "./frontend")],
	    	loader: "babel-loader",
            options: {
                presets: [['es2015', {modules: false}], "es2016", "es2017", "react"],

                plugins: ['transform-runtime'], 
            }
	    },
	    {

            test: /\.scss$/,
            use: extractSass.extract({
                use: [
                {
                    loader: "css-loader"
                },

                {
                    loader: "sass-loader",


                    options: {
            			includePaths: [path.resolve(__dirname, "./")],
            		},
                }],

                fallback: "style-loader"
            }),
	    },
	    {
	    	test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
			use: "file-loader?name=../[path][name].[ext]",
	    }
	  ]
	},
	plugins: [
		new webpack.NoErrorsPlugin(),
		new webpack.optimize.CommonsChunkPlugin({
			name: "commons",
			filename: "commons.js",
			minChunks: 2,
		}),
		new webpack.LoaderOptionsPlugin({
		    minimize: true,
   		}),
		extractSass,
	],
	watch: true,
}
  • Вопрос задан
  • 1133 просмотра
Решения вопроса 2
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Так же можете использовать code splitting (https://toster.ru/answer?answer_id=1010668)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы