웹팩 번들의 크기를 최소화하는 방법은 무엇입니까?

웹팩 번들의 크기를 최소화하는 방법은 무엇입니까?

---

react및 webpack모듈 번 들러를 사용하여 웹 앱을 작성하고 있습니다. 내 jsx코드는 지금까지 매우 가볍고 전체 폴더의 크기는 25kb입니다.

내 bundle.js생성 webpack은 2.2MB입니다. -p플래그를 사용 하여 최적화를 실행 한 후 번들을 700kb로 줄이며 이는 여전히 매우 큽니다.

react.min.js파일 을 살펴 봤는데 크기는 130kb입니다.

웹팩이 그렇게 큰 파일을 생성하거나 내가 뭔가 잘못하고있는 것이 가능합니까?

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"
    }]
  }
};

편집하다

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"
  }
}

---

귀하의 의견에 따르면 material-ui및 react-bootstrap. 이러한 종속성은 react및 react-dom패키지 와 함께 webpack에 의해 번들로 제공됩니다 . 귀하 require또는 import패키지는 언제든지 번들 파일의 일부로 번들로 제공됩니다.

그리고 여기 내 추측이 나온다. 라이브러리 방식을 사용하여 react-bootstrap및 material-ui구성 요소를 가져올 수 있습니다 .

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

이것은 훌륭하고 편리하지만 번들 Button및 FlatButton(및 해당 종속성)뿐만 아니라 전체 라이브러리도 포함합니다.

그것을 완화하는 한 가지 방법 만하는 것입니다 import또는 require필요한 사항은 말할 수 구성 요소 방법. 동일한 예를 사용하여 :

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

Button, FlatButton및 해당 종속성 만 번들로 제공됩니다 . 그러나 전체 라이브러리는 아닙니다. 따라서 모든 라이브러리 가져 오기를 제거 하고 대신 구성 요소 방식을 사용 하려고합니다 .

많은 구성 요소를 사용하지 않는 경우 번들 파일의 크기를 상당히 줄여야합니다.

추가 설명 :

라이브러리 방식을 사용하는 경우 실제로 사용하는 요소에 관계없이 이러한 모든 react-bootstrap 및 모든 material-ui 구성 요소를 가져 옵니다 .

---

2017 년 1 월 편집 -이후 다른 Webpack 플러그인에 대해 조금 더 배웠고 이것을 업데이트하고 싶었습니다. 그것은 밝혀 UglifyJS이 매우 주류가 될 것 같지 않는 설정 옵션 littany을 가지고 있지만 번들 크기에 큰 영향을 미칠 수 있습니다. 이것은 일부 주석이있는 현재 구성입니다 (사이트의 문서는 훌륭합니다).

 new webpack.optimize.UglifyJsPlugin({
      comments: false, // remove comments
      compress: {
        unused: true,
        dead_code: true, // big one--strip code that will never execute
        warnings: false, // good for prod apps so users can't peek behind curtain
        drop_debugger: true,
        conditionals: true,
        evaluate: true,
        drop_console: true, // strips console statements
        sequences: true,
        booleans: true,
      }
    })

한 번은 uglify이스케이프 된 유니 코드 문자 표시 와 관련 하여 모호한 문제가 발생 했으므로 이러한 변환을 사용할 경우 이와 같은 엣지 케이스를 사용할 수 있습니다.

추가 읽기 링크가 webpack있는 웹팩 문서 에서 특정 옵션 지원에 대한 자세한 내용을 읽을 수 있습니다 .

---

(sidenote: I think your package.json is mixed-up... at least a few of those dev-dependencies are dependencies in every package.json I've seen (e.g., the react-starter-kit)

If you're preparing for production, there are a few more steps you should take to get your file size down. Here's a snip of my webpack.config.js:

 plugins: [


        new webpack.optimize.UglifyJsPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        })
    ],

1) minifies/uglifies your code

2) replaces duplicate code to minimize file-size

3) tells webpack to omit some things it uses for node environment builds

Finally, if you use a source map (which you probably should), you'll want to add the appropriate line. Sentry wrote a nice blog post about this.

In my build, i use devtool: 'source-map' for production

---

UPDATED 05/18 : update UglifyJsPlugin setting for better minification

I use below configuration for the minification in production code.

 plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        // This has effect on the react lib size
        'NODE_ENV': JSON.stringify('production'),
      }
    }),
    new ExtractTextPlugin("bundle.css", {allChunks: false}),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      mangle: true,
      compress: {
        warnings: false, // Suppress uglification warnings
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        screw_ie8: true,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        if_return: true,
        join_vars: true
      },
      output: {
        comments: false,
      },
      exclude: [/\.min\.js$/gi] // skip pre-minified libs
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), 
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0
    })
  ],

---

Have you looked at how you're scripts are being sent over the wire... I had some very simple react components that were up around 300kb each, and that was after the webpack optimizations. After they were gzipped they came down to 38kb. Still sizable - but that's what we get for using tomorrows features today. If you're using node/express to serve static resources, including your javascript - look at compression (https://github.com/expressjs/compression). I'd also suggest looking at the node best practices guide for production https://expressjs.com/en/advanced/best-practice-performance.html If you're not serving files through node, then apache (or other webserver) will have options for compressing text based files.

---

I find it useful to mention the source-map-explorer utility that helps in knowing what exactly is in your bundle.js file. It can help you identify if there are any unnecessary things in bundle js. you can install the source-map-explorer from npm and use it like

source-map-explorer yourBundle.js

Besides this, as mentioned by @kimmiju , check if your server is using some compression.

You can also try to asynchronously load routes (lazy loading in webpack) , so that your entire bundlejs file is not sent in one go , instead it is sent in chunks when user navigates to those routes.

ReferenceURL : https://stackoverflow.com/questions/34239731/how-to-minimize-the-size-of-webpacks-bundle