Webpack создает большой файл с небольшим проектом

19

Я получил свой веб-пакет, генерирующий большой файл main.js (1,7 МБ) с небольшим проектом из ~ 20-30 файлов размером менее 100 строк каждый. Требуемые зависимости немногочисленны (React, Fluxible), и я использую каждый плагин оптимизации, который я могу понять:

module.exports = {
  output: {
    path: './build',
    publicPath: '/public/',
    filename: '[name].js'
  },
  debug: false,
  devtool: 'eval',
  target: 'web',
  entry: [
  'bootstrap-sass!./bootstrap-sass.config.js',
  './client.js',
  ],
  stats: {
    colors: true,
    reasons: false
  },
  resolve: {
    extensions: ['', '.js'],
    alias: {
      'styles': __dirname + '/src/styles',
      'components': __dirname + '/src/scripts/components',
      'actions': __dirname + '/src/scripts/actions',
      'stores': __dirname + '/src/scripts/stores',
      'constants': __dirname + '/src/scripts/constants',
      'mixins': __dirname + '/src/scripts/mixins',
      'configs': __dirname + '/src/scripts/configs',
      'utils': __dirname + '/src/scripts/utils'
    }
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style!css' },
      { test: /\.js$/, exclude: /node_modules/, loader: require.resolve('babel-loader') },
      { test: /\.json$/, loader: 'json-loader'},
      { test: /\.(png|svg|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.(ttf|eot|svg|woff|woff(2))(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?name=/[name].[ext]"},
      { test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader',
          'css!sass?outputStyle=expanded&' +
          "includePaths[]=" +
          (path.resolve(__dirname, "./node_modules"))
          )
      }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    }),
    new ExtractTextPlugin("[name].css", {allChunks: true}),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.AggressiveMergingPlugin()
  ],

};

Что я делаю не так или где я могу еще улучшить размер файла?     

задан Mohamed El Mahallawy 25.06.2015 в 04:48
источник

3 ответа

14

Я снизил скорость реакции с 2.1 Мб до 160 Кб, просто выполнив следующие действия (devtools: 'source-map'), используя uglifyjs с настройками по умолчанию (без gzip он составляет около 670 КБ).

Вероятно, это не замечательно, но, по крайней мере, это уже не сумасшествие.

Для потомков, вот мой конфиг веб-пакета:

// webpack.config.js
var webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:2992',
        'webpack/hot/only-dev-server',
        './js/main'
    ],
    output: {
        path: './out/',
        filename: 'main.js',
        chunkFilename: '[name]-[chunkhash].js',
        publicPath: 'http://127.0.0.1:2992/out/'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loaders: ['react-hot', 'babel?optional=runtime&stage=0&plugins=typecheck']
            }
        ]
    },
    progress: true,
    resolve: {
        modulesDirectories: [
            'js',
            'node_modules'
        ],
        extensions: ['', '.json', '.js']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new webpack.DefinePlugin({
            'process.env': {
                // This has effect on the react lib size
                'NODE_ENV': JSON.stringify('production'),
            }
        }),
        new webpack.optimize.UglifyJsPlugin()
    ]
};
    
ответ дан pip 06.07.2015 в 01:09
  • Мой проект приводит к тому же файловому размеру, что и ваш, а также он не сумасшедший, но опять же на моем сайте почти ничего нет, поэтому я ожидаю, что размер файла будет намного меньше. Я связываю его; проверьте, например. package.json в нем, чтобы увидеть, есть ли что-то, что использует ваш проект, который может занимать много места: github.com/amcsi/szeremi/tree/f93671a –  Attila Szeremi 28.02.2016 в 02:00
  • Я взял HotModuleReplacementPlugin для моего выпуска prod –  P.Brian.Mackey 25.08.2016 в 04:15
  • Почему вы используете devtool для сборки? Это должно быть установлено на false ... –  Philippe 08.03.2017 в 11:06
9

Вы должны установить как минимум

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      // This has effect on the react lib size
      'NODE_ENV': JSON.stringify('production'),
    }
  }),
  ...
],

Это значительно поможет с React.

Кроме того, установка devtool в source-map предпочтительнее в производственной среде. См. официальную документацию для получения дополнительной информации.

Вы можете попытаться проверить вывод, используя инструмент анализа . Чтобы получить JSON, он ожидает, что вам нужно сделать что-то вроде webpack --json > stats.json , а затем передать этот stats.json в инструмент. Это может дать вам некоторое представление.

    
ответ дан Juho Vepsäläinen 25.06.2015 в 07:47
  • Да, я обязательно посмотрю, как это повлияет на код. Кроме того, я нашел свою ошибку, которую я бы предложил добавить к ответу, я делал devtools: true, из-за чего мой файл был огромным, а для производства он не должен быть правдой. –  Mohamed El Mahallawy 25.06.2015 в 19:59
  • Круто, я добавил это. Забыл о devtool полностью. –  Juho Vepsäläinen 26.06.2015 в 08:58
  • Альтернативный инструмент командной строки для анализа пакетов webpack: github.com/robertknight/webpack-bundle-size-analyzer –  jmu 21.01.2016 в 17:54
7

Вы также можете ознакомиться с анализатором пакетов Webpack .

Он представляет содержимое пакета как удобную интерактивную масштабируемую древовидную карту.

    
ответ дан th0r 26.10.2016 в 07:23