Блог

Привет, у меня есть приложение ReactJS. Я тоже использую webpack. Когда я запускаю npm run build , мое приложение объединяется и сохраняется.

Теперь мой build.js составляет около 60 МБ.

Есть ли способ сжать или уменьшить это?

Заранее спасибо

Обновить:

У меня много импортированных пакетов. должен ли я также опубликовать package.json?

webpack.config

 const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');


const settings = {
    entry: {
        bundle: [
            'babel-polyfill',
            'whatwg-fetch',
            'react-hot-loader/patch',
            './src/frontend/Index.js'
        ]
    },
    output: {
        filename: '[name].js',
        publicPath: '/',
        path: path.resolve('build')
    },
    resolve: {
        extensions: ['.js', '.json', '.css']
    },
    devtool: 'eval-source-map',
    module: {
        rules: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['es2015', {modules: false}],
                        'stage-0',
                        'stage-2',
                        'react'
                    ],
                    plugins: [
                        'transform-node-env-inline'
                    ],
                    env: {
                        development: {
                            plugins: ['react-hot-loader/babel']
                        }
                    }
                }
            },
            {
                test: /.scss$/,
                use: [{
                    loader: 'style-loader' // creates style nodes from JS strings
                }, {
                    loader: 'css-loader' // translates CSS into CommonJS
                }, {
                    loader: 'sass-loader' // compiles Sass to CSS
                }]
            },
            {
                test: /.(woff|woff2)(?v=d .d .d )?$/,
                loader: 'url-loader?limit=10000amp;mimetype=application/font-woff'
            },
            {
                test: /.woff2(?v=d .d .d )?$/,
                loader: 'url-loader?limit=10000amp;mimetype=application/font-woff'
            },
            {
                test: /.ttf(?v=d .d .d )?$/,
                loader: 'url-loader?limit=10000amp;mimetype=application/octet-stream'
            },
            {
                test: /.eot(?v=d .d .d )?$/,
                loader: 'file-loader'
            },
            {
                test: /.svg(?v=d .d .d )?$/,
                loader: 'url-loader?limit=10000amp;mimetype=image/svg xml'
            },
            {
                test: /.(jpe?g|png|gif)$/i,
                loaders: ['file-loader?context=src/imagesamp;name=images/[path][name].[ext]', {
                    loader: 'image-webpack-loader',
                    query: {
                        mozjpeg: {
                            progressive: true
                        },
                        gifsicle: {
                            interlaced: false
                        },
                        optipng: {
                            optimizationLevel: 4
                        },
                        pngquant: {
                            quality: '75-90',
                            speed: 3
                        }
                    }
                }],
                exclude: /node_modules/,
                include: __dirname
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            sourceMap: true,
                            importLoaders: 1,
                            localIdentName: '[name]--[local]--[hash:base64:8]'
                        }
                    },
                    'postcss-loader' // has separate config, see postcss.config.js nearby
                ]
            }
        ]
    },
    devServer: {
        contentBase: path.resolve('src/www'),
        publicPath: '/',
        port: 8080,
        quiet: false,
        hot: true,
        historyApiFallback: true,
        inline: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new CopyWebpackPlugin([
            {from: 'src/www/'}
        ])
    ]
};

module.exports = settings;
  

Существуют плагины, которые можно использовать для уменьшения размера пакета приложений с помощью webpack с использованием производственного режима

 var CompressionPlugin = require("compression-webpack-plugin");

plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      mangle: true,
      compress: {
        warnings: false, // Suppress uglification warnings
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        screw_ie8: true
      },
      output: {
        comments: false,
      },
      exclude: [/.min.js$/gi] // skip pre-minified libs
    }),
    new webpack.IgnorePlugin(/^./locale$/, [/moment$/]),
    new webpack.NoErrorsPlugin(),
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /.js$|.css$|.html$/,
      threshold: 10240,
      minRatio: 0
    })
  

Проверьте эти блоги:

https://hackernoon.com/optimising-your-application-bundle-size-with-webpack-e85b00bab579

https://developers.google.com/web/fundamentals/performance/webpack/decrease-frontend-size

В weboack.config измените devtool как пустой

devtool:''

Затем используйте плагин webpack bundle analyzer для анализа, какой модуль потребляет больше размера