web-dev-qa-db-fra.com

Pourquoi mes packs web bundle.js et vendor.bundle.js sont-ils si gros?

La taille du fichier de tous mes projets React est généralement très grande (bundle.js est de 4,87 Mo et le vendeur.bundle.js de 2,87 Mo). Je ne sais pas pourquoi c'est si grand. J'ai déjà uglifyJS, mais cela ne semble pas beaucoup aider (5.09> 4.87mb et 2.9> 2.87mb)

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

require('es6-promise').polyfill();

var config = {
  entry: {
    app: [
      './src/entry.jsx'
    ],
    vendor: [
      'react',
      'lodash',
      'superagent'
    ]
  },
  output: {
    path: './build',
    filename: "bundle.js"
  },
  eslint: {
    configFile: './.eslintrc'
  },
  devtool: 'eval-source-map',
  module: {
    loaders: [
      { test: /\.(js|jsx)$/, loaders: ['react-hot', 'babel?experimental'], exclude: /node_modules/},
      { test: /\.(js|jsx)$/, loader: "eslint-loader", exclude: /node_modules/},
      { test: /\.json$/, loader: 'json' },
      { test: /\.yml$/, loader: 'json!yaml' },
      { test: /\.scss$/, loader: 'style!css!sass' },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({'process.env': {'NODE_ENV': JSON.stringify('production')}}),
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
    new webpack.optimize.UglifyJsPlugin({minimize: true}),
    new webpack.NoErrorsPlugin()
  ]
};

module.exports = config;

Mon package.json

{
  "license": "MIT",
  "engines": {
    "iojs": ">= 1.6.2"
  },
  "scripts": {
    "create:index": "mustang -t index.tmpl -i config.json -o build/index.html",
    "predev": "mkdir -p build/ && npm run create:index",
    "dev": "webpack-dev-server --Host 0.0.0.0 --hot --progress --colors --content-base build",
    "backend": "NODE_ENV=production node server/server.js",
    "backend:dev": "DEBUG=tinderlicht node server/server.js",
    "predeploy": "mkdir -p build/ && npm run create:index",
    "deploy": "NODE_ENV=production webpack -p",
    "test": "node webpack-mocha.config.js"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "axios": "^0.7.0",
    "babel": "^5.8.23",
    "babel-core": "^5.8.25",
    "babel-eslint": "^4.1.3",
    "babel-loader": "^5.3.2",
    "bluebird": "^2.10.2",
    "css-loader": "^0.19.0",
    "es6-collections": "^0.5.1",
    "es6-promise": "^3.0.2",
    "eslint": "^1.6.0",
    "eslint-loader": "^1.1.0",
    "eslint-plugin-react": "^3.5.1",
    "extract-text-webpack-plugin": "^0.8.2",
    "file-loader": "^0.8.1",
    "firebase": "^2.3.1",
    "fireproof": "^3.0.3",
    "jquery": "^2.2.0",
    "json-loader": "^0.5.1",
    "jsonld": "^0.4.2",
    "jsx-loader": "^0.13.2",
    "lodash": "^3.3.0",
    "mustang": "^0.1.3",
    "node-sass": "^3.3.3",
    "react": "^0.14.0",
    "react-dom": "^0.14.0",
    "react-hot-loader": "^1.1.5",
    "sass-loader": "3.0.0",
    "style-loader": "^0.12.4",
    "superagent": "^1.4.0",
    "url-loader": "^0.5.5",
    "webpack": "^1.5.3",
    "webpack-dev-server": "^1.7.0"
  },
  "dependencies": {
    "body-parser": "^1.15.0",
    "cors": "^2.7.1",
    "debug": "^2.2.0",
    "express": "^4.13.4",
    "mustache": "^2.2.1",
    "nodemailer": "^2.1.0",
    "nodemailer-sendmail-transport": "^1.0.0",
    "react-radio-group": "^2.2.0",
    "uglifyjs": "^2.4.10"
  }
}

Quelqu'un at-il une idée sur la façon de résoudre ce problème?

javascriptbuildreactjswebpack
9
ervazu

MODIFIER

Je ne suis pas sûr que vous soyez sur Mac/IO ou Windows, mais 2 choses que j'ai remarquées:

1: "deploy": "NODE_ENV=production webpack -p" ne semble pas correct, vous devez définir la variable lorsque vous la construisez pour le développement et le déploiement et que vous ne la définissez pas ici.

2: Vous devez le définir auparavant sur le terminal/la commande Invite.

Voici un exemple pour webpack minify et deploy, vous devez vous adapter un peu, mais je pense que cela devrait vous aider.

Vous devez d'abord définir cette variable d'environnement pour le noeud sur la commande, puis l'ouvrir dans Windows ou le terminal sous mac et:

Mac: export NODE_ENV=production

Windows: set NODE_ENV=production

Vous pouvez faire un echo dans windows ou lister dans mac pour vérifier si une variable a été ajoutée.

Puis dans votre webpack.config.js

    var PROD = process.env.NODE_ENV == 'production';
    var config = {
      entry: {
            app: [
          './src/entry.jsx'
        ],
        vendor: [
          'react',
          'lodash',
          'superagent'
        ],
         output: {
           path: './build',
           filename: PROD ? "bundle.min.js" : "bundle.js"
         },
         plugins: PROD ? [
              new webpack.optimize.UglifyJsPlugin({minimize: true}),
              new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min.js'),
          ]:[
            new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
          ]
};

Dans votre package.json, vous pouvez définir ces scripts:

Si vous êtes sous Windows:

"scripts": {
         "dev": "set NODE_ENV=development&&webpack-dev-server --Host 0.0.0.0 --hot --progress --colors --content-base build",
        "deploy": "set NODE_ENV=production&&webpack -p"
    }

Si vous êtes sur Mac IOS: Si l'exportation ne fonctionne pas ici, utilisez set à la place, la différence par rapport à windows et mac est l'espace après &&.

"scripts": {
         "dev": "export NODE_ENV=development&& webpack-dev-server --Host 0.0.0.0 --hot --progress --colors --content-base build",
        "deploy": "export NODE_ENV=production&& webpack -p"
    }

Utilisez la commande nand run watch pour intégrer le développement et npm run deploy pour le construire à des fins de production dans une version réduite.

4
Vinicius Vieira

Je vous recommande vivement d'utiliser Webpack Bundle Analyzer pour réduire la taille de votre ensemble ( https://github.com/th0r/webpack-bundle-analyzer ). Vous pouvez voir ce qui rend votre paquet si gros. Vous pouvez également utiliser tous les éléments de firebase, lodash et jquery. En plus d'utiliser les plugins de production webpack, essayez d'utiliser ignorer ce que vous n'utilisez pas et importez uniquement ce dont vous avez besoin, comme ceci: Dans les plugins webpack:

    new webpack.IgnorePlugin(/^\.\/auth$/, /firebase$/),
    new webpack.IgnorePlugin(/^\.\/storage$/, /firebase$/),
    new webpack.IgnorePlugin(/^\.\/messaging$/, /firebase$/),

Dans vos importations: 

 const Firebase: any = require('firebase/app');  require('firebase/database');

Pour lodash, importez uniquement ce dont vous avez besoin ou créez un build personnalisé ( https://lodash.com/custom-builds ): 

import find from 'lodash/find'

Vous pouvez également créer des versions personnalisées jquery.

6
evanjmg

J'ai un repo setup avec juste React/React Dom et un composant Hello Word React. Le fichier vendor.js est de 189 Ko.

https://github.com/timarney/react-setup 

var path = require('path')
var webpack = require('webpack')

var config = {
  entry: {
    app: path.resolve(__dirname, './src/main.js'),
    vendors: ['react']
  },
  output: {
    path: './src',
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    contentBase: './src',
    port: 3000
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false
      },
      compress: {
        warnings: false,
        screw_ie8: true
      }
    }),
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
  ]
}

if (process.env.NODE_ENV === 'production') {
  config.output.path = path.join(__dirname, 'dist/')
}

module.exports = config

Remarque: je configure l'environnement NODE ENV via un script NPM.

"scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "NODE_ENV=production webpack -p && cp src/index.html dist/index.html"
  },
2
Tim Arney

Pouvez-vous essayer d’ajouter cecidevtool: 'cheap-module-source-map',in config?

 var config = {
     devtool: 'cheap-module-source-map',
     entry: {
 ....

http://webpack.github.io/docs/configuration.html#devtool

1
David Guan

Réagissez s'attend à ce que vous définissez NODE_ENV sur 'production' pour les versions de production, puis exécutez-le dans Uglify. Cette opération supprime beaucoup de verbosité supplémentaire, de consignation sur la console, etc. via webpack (par exemple NODE_ENV=production webpack sur la ligne de commande).

0
Brendan Gannon