bundle.js zu groß im Webpack-Projekt

Ich versuche ein reactive + babel + webpack-Projekt zu erstellen. es funktioniert, aber die bundle.js-Datei ist 950 KB groß.bundle.js zu groß im Webpack-Projekt

ist bundle.js immer so groß? Wenn nicht, wie reduziere ich die Größe?

das ist mein webpack.config.js:

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

var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
entry: APP_DIR + '/index.jsx', 
output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
}, 
plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify('production') 
     } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compressor: { 
     warnings: false 
     } 
    }) 
], 
module : { 
    loaders : [ 
     { 
     test : /\.jsx?/, 
     loader : 'babel', 
     query: 
     { 
      presets: ["es2015", 'react'] 
     } 
     } 
    ] 
} 
}; 

module.exports = config;

Quelle

2016-12-28 Nir Kogman

ja. Bündel wird basierend auf Ihren Abhängigkeiten wachsen. webpack wird alle Ihre Abhängigkeiten packen, wo Sie diese mit importieren. Alternativ können Sie CDN für Ihre Abhängigkeiten während der Bereitstellung verwenden und ES6 zu ES5 konvertieren, indem Sie babel für Ihre reaktiven Komponenten verwenden. – subash

Es hängt immer von den Bibliotheken ab, die Sie damit bündeln. Sie können auch versuchen, das Paket zwischen den Anbieterbibliotheken und Ihrem App-Code aufzuteilen. Auf diese Weise kann der Client den Anbieter zwischenspeichern und muss ihn für eine Weile nicht erneut herunterladen. Sie haben auch den Webpack-dll-Ansatz, der die Kompilierung splittet und beschleunigt (wenn Sie ein Tool wie hmr verwenden) – gretro

Es hängt weitgehend von Ihren Abhängigkeiten ab. Sie können ignorieren ie8 und dedupe Ihre Abhängigkeiten, um einige kBs zu rasieren:

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     screw_ie8: true, 
     warnings: false 
     }, 
     mangle: { 
     screw_ie8: true 
     }, 
     output: { 
     comments: false, 
     screw_ie8: true 
     } 
    }) 
    ] 
};

Quelle

2016-12-28 16:49:42 Tholle

-1

Sie können immer versuchen, ein javascript "minify" Tool zu verwenden. Es komprimiert Ihren Code optimieren. Suche auf Google nach Javascript minimieren.

Quelle

2016-12-28 15:54:24

Es sind normalerweise viele Abhängigkeiten enthalten, so dass diese Größe nicht ungewöhnlich ist. Versuchen Sie folgenden Flags zu verwenden, wenn Ihr Bündel zu erzeugen:

--optimize-minimize - Minifies bündeln

--optimize-occurrence-order - Optimiert chunk IDs

--optimize-dedupe - dedupliziert gleiche Teile des Codes

bundle.js zu groß im Webpack-Projekt

Antwort

Verwandte Themen