ウェブパックと大手ベンダーバンドル

Question

Webpackベンダーバンドルが非常に大きい（元々〜1.6 MB）バンドルが見つかりました。 webpack-bundle-size-analyzerを使用した後、私は角度がこれに大きな貢献をしていることを発見しました。

➜ dapper-ui git:(master) webpack --config ./conf/webpack-dist.conf.js --json | webpack-bundle-size-analyzer 
angular: 1.13 MB (25.9%) 
lodash: 526.94 KB (11.8%) 
moment: 429.12 KB (9.58%) 
angular-ui-router: 339.35 KB (7.58%) 
chart.js: 311.27 KB (6.95%) 
angular-ui-bootstrap: 264.26 KB (5.90%) 
ng-table: 197.55 KB (4.41%) 
angular-animate: 147.1 KB (3.29%) 
angularjs-slider: 87.52 KB (1.95%) 
validator: 70.85 KB (1.58%) 
bootstrap-sass: 68.07 KB (1.52%) 
buffer: 47.47 KB (1.06%) 
angular-resource: 34.45 KB (0.769%) 
angular-messages: 27.39 KB (0.612%) 
angular-file-upload: 20.36 KB (0.455%) 
angular-sticky-plugin: 19.06 KB (0.426%) 
color-convert: 16.53 KB (0.369%) 
ng-tags-input: 15.62 KB (0.349%) 
angular-aria: 14.87 KB (0.332%) 
angular-ui-bootstrap-datetimepicker: 13.26 KB (0.296%) 
angular-chart.js: 12.7 KB (0.284%) 
chartjs-color: 10.96 KB (0.245%) 
chartjs-color-string: 5.9 KB (0.132%) 
color-name: 4.49 KB (0.100%) 
base64-js: 3.4 KB (0.0760%) 
angular-validation-match: 2.06 KB (0.0460%) 
ieee754: 2.01 KB (0.0448%) 
css-loader: 1.47 KB (0.0328%) 
webpack: 1.03 KB (0.0230%) 
isarray: 132 B (0.00288%) 
<self>: 622.84 KB (13.9%) 

縮小した角度のファイルが〜160kbであることを確認しました。私はそれを使用していないか、または縮小されたサイズを表示していないと思います。いずれにせよ、私はUglifyを使用しているので、サイズは似ていると思いますか？

Webpackのエイリアスを使用して、Webpackで縮小されたバンドルを使用しようとしましたが、ベンダーバンドルを大幅に削減できませんでした。

当分の間、ベンダーバンドルを4つに分割して、並行してダウンロードすることで、速度を上げることができますが、さらに好奇心をそそる方法と、角度やその他のライブラリが、提供されるコードはかなり小さくなります。

私のWebPACKの設定：

const webpack = require('webpack'); 
const conf = require('./gulp.conf'); 
const path = require('path'); 

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const pkg = require('../package.json'); 
const autoprefixer = require('autoprefixer'); 

const deps = Object.keys(pkg.dependencies); 
const vendorNumInBundle = Math.ceil(deps.length/4) 

module.exports = { 
    module: { 
    preLoaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'eslint' 
     } 
    ], 

    loaders: [ 
     { 
     test: /.json$/, 
     loaders: [ 
      'json' 
     ] 
     }, 
     { 
     test: /\.(css|less)$/, 
     loaders: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'less-loader']) 
     }, 
     { 
     test: /\.scss$/, 
     loaders: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'sass-loader']) 
     }, 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: [ 
      'ng-annotate' 
     ] 
     }, 
     { 
     test: /.html$/, 
     loaders: [ 
      'html' 
     ] 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new HtmlWebpackPlugin({ 
     template: conf.path.src('index.html') 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: {unused: true, dead_code: true, warnings: false}, // eslint-disable-line camelcase 
     comments: false 
    }), 
    new ExtractTextPlugin('index-[contenthash].css'), 
    new webpack.optimize.CommonsChunkPlugin({ 
     names: ['vendor5', 'vendor4', 'vendor3', 'vendor2', 'vendor1'], 
     minChunks: Infinity 
    }), 
    function() 
    { 
     this.plugin("done", function(stats) 
     { 
      if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') == -1) 
      { 
       console.log(stats.compilation.errors); 
       process.exit(1); // or throw new Error('webpack build failed.'); 
      } 
      // ... 
     }); 
    } 
    ], 
    postcss:() => [autoprefixer], 
    output: { 
    path: path.join(process.cwd(), conf.paths.dist), 
    filename: '[name]-[hash].js' 
    }, 
    entry: { 
    app: `./${conf.path.src('index')}`, 
    vendor1: deps.slice(0, vendorNumInBundle), 
    vendor2: deps.slice(vendorNumInBundle, vendorNumInBundle * 2), 
    vendor3: deps.slice(vendorNumInBundle * 2, vendorNumInBundle * 3), 
    vendor4: deps.slice(vendorNumInBundle * 3), 
    vendor5: [ 
     './src/assets/js/angular-natural-language.min.js', 
     './src/assets/js/angular-img-cropper.js', 
     './src/assets/js/satellizer.min.js', 
     './src/assets/js/satellizer.min.js', 
     './src/assets/js/angular-bootstrap-toggle', 
    ] 
    } 
}; 

Answer 1

は、私はその縮小さサイズを使用するか、または表示されないと思います。

これは正しいです。表示されている出力は、ライブラリの未対応バージョン用です。 READMEのImportant Note about Minified Codeを参照してください。

サイズの変更されていないバージョンのサイズ情報は、さまざまなモジュールで取り込まれたバンドルの大雑把な比率を調べるのに便利です。このツールの出力で縮小されたサイズを確認するには、プロセスの最後にバンドル全体を縮小するのではなく、ローダーを使用して個々のモジュールを縮小するようにWebpackを設定する必要があります。 webpack --optimize-minimize。