webpack 包大小 vs requirejs 包大小

Question

我正在尝试将基于 requireJS 的应用程序迁移到 webpack。

这个应用程序没有很多依赖项 - 实际上它只需要一个 promise polyfill - 我已经想出了如何使用缩小的 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

这不适用于您正在使用的所有库，但如果可能，您可以通过仅导入您需要使用的实际 function/component 来节省文件大小。

这里有一个 lodash 的例子

import has from 'lodash/has';

上面的方法只会导入 has 方法。

但是，如果您执行以下任一操作：

import { has } from 'lodash';

或

import _ from 'lodash';

然后您将导入所有 lodash 库，这会增加您的文件大小。

但是对于其他库（即 moment.js 的当前版本），只导入您需要的库的一部分并不是那么简单。

还有一些其他方法可以尝试解决这个问题（即调整您的 webpack 设置），但我会从这个方法开始。

Answer 2

在深入研究该问题后，我找到了捆绑包过大的原因。在真正的 requireJS 风格中，我有：

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

这个 'http' 应该引用我自己的库，但是 webpack 将它解析为某个 NPM 模块，引入了所有上述依赖项。

我现在将代码更改为：

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

捆绑包的大小回到了 44KB 左右。

webpack 包大小 vs requirejs 包大小

webpack bundle size vs requirejs bundle size

javascript

requirejs

webpack