web-dev-qa-db-fra.com

Webpack créant un gros fichier avec un petit projet

J'ai obtenu mon webpack générant un gros fichier main.js (1.7mb) avec un petit projet de ~ 20-30 fichiers de moins de 100 lignes chacun. Les dépendances requises sont peu nombreuses (React, Fluxible) et j'utilise tous les plugins d'optimisation que je peux comprendre:

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()
  ],

};

Que fais-je de mal ou où puis-je encore améliorer la taille du fichier?

webpackwebpack-dev-server
22
Mohamed El Mahallawy

J'ai réagi de 2,1 Mo à 160 Ko gzippés juste en faisant les choses ici (devtools: 'source-map'), en utilisant uglifyjs avec les paramètres par défaut (sans gzip, cela finit par être d'environ 670 Ko).

Ce n'est probablement pas ça génial, mais au moins ce n'est plus fou.

Pour la postérité, voici ma configuration webpack:

// 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()
    ]
};
14
pip

Vous devez définir au moins

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

Cela aidera considérablement React.

De plus, définissez devtool sur source-map est préférable dans l'environnement de production. Voir documentation officielle pour plus d'informations.

Vous pouvez essayer d'inspecter la sortie en utilisant l'outil d'analyse . Pour obtenir le JSON, il s'attend à ce que vous deviez faire quelque chose comme webpack --json > stats.json puis passez ce stats.json à l'outil. Cela pourrait vous donner un aperçu.

9
Juho Vepsäläinen

Vous pouvez également consulter Webpack Bundle Analyzer .

Il représente le contenu du bundle sous la forme d'un treemap interactif zoomable pratique.

7
th0r