webpackバンドルサイズとrequirejsバンドルサイズ

Question

webpackにrequireJSベースのアプリケーションを移行しようとしています。

このアプリケーションには依存性が多くありません。実際には、約束事なpolyfillだけが必要です。また、縮小したものを使用してwebpackを作成する方法をすでに理解しています。

必要なバンドルのサイズは43KBで、webpackを使用する場合は121KBです。

121KBは実際には巨額ではありませんが、注目すべきサイズの増加です。

実行中webpack --display-reasons --display-modules自分のバンドルにnode_moduleの依存関係が含まれているように感じました。私が期待した以上の方法。

は、私のようなものを見るbuffer、readable-stream、stream-http、stream-browserify、core-util-is、buffer-shims、...

WebPACKのラッパーコードのこの予想/部分はありますか？

これらの依存関係を除外するためにできることはありますか？

これは私のwebpack.config.jsです：これは、あなたが使用しているすべてのライブラリでは動作しません

var webpack = require('webpack'); 
 

 
module.exports = { 
 
    entry: { 
 
     "mynexuz": "./js/mynexuz-api.js", 
 
     "kws": "./js/kws-api.js", 
 
     "main": "./js/main.js", 
 
     "quest": "./js/quest.js" 
 
    }, 
 

 
    output: { 
 
     filename: "./dist/[name]-bundle.js", 
 
    }, 
 

 
    plugins: [ 
 
     new webpack.optimize.UglifyJsPlugin({ 
 
      compress: { 
 
       warnings: false 
 
      } 
 
     }), 
 
     new webpack.DefinePlugin({ 
 
      'process.env': { 
 
       'NODE_ENV': JSON.stringify('production'), 
 
      } 
 
     }) 
 
    ], 
 
    
 
    node: { 
 
     //stream: false, 
 
     //process: false, 
 
     //global: false 
 
    }, 
 

 
    // Enable sourcemaps for debugging webpack's output. 
 
    devtool: "source-map", 
 

 
    resolve: { 
 
     modules: ['js', 'js/lib', 'node_modules'], 
 
     // Add '.ts' and '.tsx' as resolvable extensions. 
 
     extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"] 
 
    }, 
 

 
    module: { 
 
     loaders: [ 
 
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 
 
      { 
 
       test: /\.js$/, 
 
       loader: "source-map-loader", 
 
       exclude: /node_modules/ 
 
      }, 
 
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. 
 
      { 
 
       test: /\.tsx?$/, 
 
       loader: "awesome-typescript-loader", 
 
       exclude: /node_modules/ 
 
      } 
 
     ] 
 
    }, 
 
};

Answer 1

この問題を深く見てみると、バンドルのサイズが大きい理由がわかりました。私が持っていた真のrequireJSスタイルで：

define(['http', 'config'], function (Http, Config) { ... }); 

この「HTTP」の事は自分のライブラリを参照するようになっていたが、WebPACKのは、上記の全ての依存関係にもたらす、いくつかのNPMモジュールにこれを解決しました。

私は今にコードを変更しました：

define(['./http', 'config'], function (Http, Config) { ... }); 

、バンドルサイズが44キロバイトバックの周りにあります。

Answer 2

が、あなたが唯一の実際の関数をインポートすることで、ファイルサイズを節約することができ、可能な場合/コンポーネントを使用する必要があります。ここ

途中上記ONLY has方法をインポートしますlodash

import has from 'lodash/has'; 

有する例です。あなたは、次のいずれかを行う場合

しかし：

import { has } from 'lodash'; 

それとも

import _ from 'lodash'; 

は、次に、あなたのファイルサイズをつり上げるますlodashライブラリのすべてをインポートします。

しかし、他のライブラリ（現在のバージョンのmoment.js）では、必要なライブラリのPARTだけをインポートするのはあまり簡単ではありません。

この問題を解決するにはいくつかの方法があります（ウェブパックの設定を調整する）が、この方法から始めます。