Bündel Dateigröße Problem mit WebPack

Question

In meiner Reagieren-App arbeitete ich beim ersten Mal mit "browserify" für Compile de es6-Dateien zu es5. Aber wenn ich überprüfe, hat die Bundle-Datei eine Größe für 1,3 MB (so viel), wenn mein Ordner mit allen Skripten 200kb hat. Ich denke, wahrscheinlich, dass browserfig wurde einschließlich Mehrfache mal die gleichen Skripte. Das ist, weil ich (zum Beispiel) haben „config.js“ und ich schließe es auf jede Datei, die ich mit

import Config from .'/config.js'; 

brauchen Wenn ich das nicht tun, zeigt die App Fehler zu sagen, dass die Anforderung, dass variable in diesem Abschnitt. Dann ändere ich meine Verwaltung von browserifizieren zu webpack. Ich fahre darüber, weil alles neu für mich ist, und die Dokumente sagen, dass Webpack meine Abhängigkeiten lesen und versuchen, einmal jede Datei einzuschließen. Aber meine Bundle-Datei behalten Größe 1,3MB.

Das ist mein Dummy webpack.config.js

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

module.exports = { 
    entry: './js/src/index.js', 
    output: { path: __dirname, filename: 'bundle.js' }, 
    module: { 
     loaders: [ 
      { 
       test: /.jsx?$/, 
       loader: 'babel-loader', 
       exclude: /node_modules|libs/, //npm and bower_components(libs) 

       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    }, 
}; 

Das ist mein package.json, dort können Sie den Befehl browserify sehen, dass ich, bevor sie mit webpack versuchen ausführen (Der Startbefehl).

{ 
    "name": "appname", 
    "version": "1.0.0", 
    "description": "app description", 
    "main": "js/dist/index.js", 
    "dependencies": { 
    "babelify": "^7.3.0", 
    "browserify": "^13.1.1", 
    "fetch": "^1.1.0", 
    "owl.carousel": "^2.2.0", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-image-holder": "^2.0.1", 
    "react-owl-carousel": "^0.14.0", 
    "react-toastr": "^2.8.2", 
    "whatwg-fetch": "^2.0.1" 
    }, 
    "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-cli": "^6.18.0", 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-plugin-external-helpers": "^6.18.0", 
    "babel-plugin-transform-react-jsx": "^6.8.0", 
    "babel-preset-env": "^1.1.5", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-es2017": "^6.16.0", 
    "babel-preset-latest": "^6.16.0", 
    "babel-preset-react": "^6.22.0", 
    "babelify": "^7.3.0", 
    "browserify": "^13.3.0", 
    "envify": "^4.0.0", 
    "gulp": "^3.9.1", 
    "gulp-concat": "^2.6.1", 
    "gulp-concat-css": "^2.3.0", 
    "gulp-notify": "^3.0.0", 
    "gulp-uglify": "^2.0.1", 
    "gulp-uglifycss": "^1.0.6", 
    "jquery": "^3.1.1", 
    "jquery-ui": "^1.12.1", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-redux": "^5.0.1", 
    "react-router": "^3.0.0", 
    "react-router-redux": "^4.0.7", 
    "redux": "^3.6.0", 
    "uglify": "^0.1.5", 
    "watchify": "^3.8.0", 
    "webpack": "^1.14.0", 
    "whatwg-fetch": "^2.0.1" 
    }, 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "watch-js": "NODE_ENV=production watchify assets/js/main.js -t babelify -t bulkify -o dist/js/app.js -v --full-path=false", 
    "start": "set NODE_ENV=production && watchify js/src/index.js -v -t [babelify --presets [env] ] -o js/dist/index.js", 
    "build": "browserify js/src/index.js -g [envify --NODE_ENV 'production'] -t [ babelify --presets [env] ] -t > js/dist/app.js" 
    }, 
    "keywords": [ 
    "app", 
    "jidapp" 
    ] 

Answer 1

können Sie versuchen, die DevTool Einstellung in Ihrer webpack.config.js angeben. Hier finden Sie einige Informationen zu den verschiedenen Einstellungen. https://webpack.js.org/configuration/devtool/ Für Produktion Builds verwende ich in der Regel billig-Modul-Source-Map. In der Entwicklung verwende ich eval.

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

module.exports = { 
    devtool: 'cheap-module-source-map', 
    entry: './js/src/index.js', 
    output: { path: __dirname, filename: 'bundle.js' }, 
    module: { 
     loaders: [ 
     { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules|libs/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
     ] 
    }, 
}; 

Sie können hier auch nach anderen Webpack-Optimierungs-Plugins suchen. https://github.com/webpack/docs/wiki/optimization