webpack捆綁包大小vs requirejs捆綁包大小

Question

我正在嘗試將基於requireJS的應用程序遷移到webpack。

這個應用程序沒有很多依賴 - 實際上它只需要一個承諾填充 - 我已經想出瞭如何使用縮小的webpack來製作webpack。

使用requireJS的包的大小爲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) { ... }); 

和包大小回到身邊44KB。

Answer 2

這並不適用於所有正在使用的圖書館工作，但如果可能的話，你可以只導入實際功能對文件大小的保存/你需要使用的組件。

這裏是lodash

import has from 'lodash/has'; 

這樣上面將只導入has方法的例子。

但是，如果你做下面的任一：

import { has } from 'lodash'; 

或者

import _ from 'lodash'; 

然後，你將導入所有lodash庫，這將提高你的文件的大小。

但是，對於其他庫（即當前版本的moment.js），只導入所需庫的一部分並不那麼簡單。

還有其他一些方法可以嘗試解決這個問題（即調整你的webpack設置），但我會從這種方法開始。