如何最小化 webpack 包的大小? [英] How to minimize the size of webpack's bundle?

问题描述

我正在编写一个使用 react 和 webpack 作为我的模块打包器的网络应用程序.到目前为止，我的 jsx 代码真的很轻，整个文件夹的大小为 25 kb.

我从 webpack 创建的 bundle.js 虽然是 2.2 mb.使用 -p 标志运行优化后，它将包减少到 700kb，这仍然非常大.

我查看了 react.min.js 文件，它的大小是 130kb.

webpack 有没有可能生成这么大的文件，还是我做错了什么?

webpack.config.js

var path = require('path');var webpack = require('webpack');模块.出口 = {条目:'./public/components/main.jsx'，输出: {路径:__dirname + "/public",文件名:'bundle.js'},模块: {装载机:[{测试:/.jsx?$/,loader: 'babel-loader',排除:/node_modules/，询问: {预设:['es2015'，'反应']}}, {测试:/\.css$/,加载器:风格！css"}]}};

编辑

package.json:

<代码>{"name": "XChange",版本":0.0.0"，私人":真的，脚本":{开始":节点./bin/www"},"main": "./bin/www",开发依赖":{"body-parser": "~1.13.2","cookie-parser": "~1.3.5",调试":~2.2.0"，"express": "~4.13.1","玉": "~1.11.0",摩根":~1.6.1"，"serve-favicon": "~2.3.0","react-dom": "~0.14.3",反应":~0.14.3"，"webpack": "~1.12.9","babel-loader": "~6.2.0","babel-core": "~6.2.1","babel-preset-react": "~6.1.18","babel-preset-es2015": "~6.1.18",反应引导":~0.28.1"，"material-ui": "~0.14.0-rc1",历史":~1.13.1"，反应路由器":~1.0.2"，"style-loader": "~0.13.0",css-loader":~0.18.0"},依赖关系":{"express-validator": "~2.18.0","猫鼬": "~4.2.9","kerberos": "~0.0.17",bcrypt":~0.8.5"}}

解决方案

根据您的评论，您正在使用 material-ui 和 react-bootstrap.webpack 将这些依赖项与您的 react 和 react-dom 包捆绑在一起.任何时候您require 或import 一个包，它都会作为包文件的一部分进行捆绑.

这是我的猜测.您可能正在使用 library 方式导入 react-bootstrap 和 material-ui 组件:

import { Button } from 'react-bootstrap';从'material-ui'导入{FlatButton}；

这很好也很方便，但它不仅捆绑了 Button 和 FlatButton(及其依赖项)，还捆绑了 整个 库.>

缓解它的一种方法是尝试只import 或require 需要什么，比如说component 方式.使用相同的示例:

从'react-bootstrap/lib/Button'导入按钮；从'material-ui/lib/flat-button'导入FlatButton；

这只会捆绑 Button、FlatButton 和它们各自的依赖项.但不是整个图书馆.所以我会尝试摆脱你所有的 library 导入并使用 component 方式代替.

如果您没有使用大量组件，那么它应该可以大大减少捆绑文件的大小.

进一步解释:

当您使用库方式导入所有这些 react-bootstrap 和 所有这些 material-ui 组件，无论您实际使用的是哪些组件.

I'm writing a web app using react and webpack as my module bundler. My jsx code is really light so far, the size of the entire folder is 25 kb.

My bundle.js created from webpack is 2.2 mb though. After running the optimization with the -p flag, it reduces the bundle to 700kb, which is still extremely big.

I have looked into the react.min.js file and its size is 130kb.

Is it possible that the webpack produces such big files or am I doing something wrong?

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './public/components/main.jsx',
  output: {
    path: __dirname + "/public",
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }, {
      test: /\.css$/,
      loader: "style!css"
    }]
  }
};

EDIT

package.json:

{
  "name": "XChange",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "main": "./bin/www",
  "devDependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "react-dom": "~0.14.3",
    "react": "~0.14.3",
    "webpack": "~1.12.9",
    "babel-loader": "~6.2.0",
    "babel-core": "~6.2.1",
    "babel-preset-react": "~6.1.18",
    "babel-preset-es2015": "~6.1.18",
    "react-bootstrap": "~0.28.1",
    "material-ui": "~0.14.0-rc1",
    "history": "~1.13.1",
    "react-router": "~1.0.2",
    "style-loader": "~0.13.0",
    "css-loader": "~0.18.0"
  },
  "dependencies": {
    "express-validator": "~2.18.0",
    "mongoose": "~4.2.9",
    "kerberos": "~0.0.17",
    "bcrypt": "~0.8.5"
  }
}

解决方案

According to your comments you are using material-ui and react-bootstrap. Those dependencies are bundled by webpack along with your react and react-dom packages. Any time you require or import a package it is bundled as part of your bundle file.

And here it comes my guess. You are probably importing the react-bootstrap and material-ui components using the library way:

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

This is nice and handy but it does not only bundles Button and FlatButton (and their dependencies) but the whole libraries.

One way to alleviate it is to try to only import or require what is needed, lets say the component way. Using the same example:

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

This will only bundle Button, FlatButton and their respective dependencies. But not the whole library. So I would try to get rid of all your library imports and use the component way instead.

If you are not using lot of components then it should reduce considerably the size of your bundled file.

As further explanation:

When you are using the library way you are importing all these react-bootstrap and all these material-ui components, regardless which ones you are actually using.

这篇关于如何最小化 webpack 包的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！