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设置），但我会从这种方法开始。