Question

嗨，我有一个reactJS应用程序。我也使用webpack。当我运行npm run build时，我的应用程序将被捆绑并存储。

现在我的build.js约为60MB。

有没有办法压缩或缩小？

预先感谢

更新：

我有很多进口的包裹。我也应该发布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=10000&mimetype=application/font-woff'
            },
            {
                test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loaders: ['file-loader?context=src/images&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;

Answer 1

有些插件可用于在生产模式下通过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

Answer 2

在weboack.config中，将devtool更改为空

devtool:''

然后使用webpack捆绑分析器插件分析哪个模块消耗更多的空间

压缩reactJS bundle.js

2 个答案: