Question

我是Webpack的新手。我尝试使用Webpack主要有两个原因：

组件管理：使用require(...)
性能：尽可能小的尺寸，可以减少对服务器的请求。

但是我刚开始使用的应用程序（目前只有四个React组件），Webpack生成的bundle.js文件 3.87Mb !!!

我很确定Webpack捆绑了我不需要的东西。我想知道如何优化生成的文件......如何“调试”Webpack的进程？

我的webpack.config.js：

var webpack = require("webpack");

module.exports = {
    entry: "./app/bootstrap.js",
    output: {
        path: __dirname,
        publicPath: "/public/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader'
            },
            {
                test: /\.js$/,
                include: /vis/,
                loader: 'babel-loader'
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg|jpeg|bmp)(\?.*$|$)/,
                loader: 'url-loader?limit=100000'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ]

};

和package.json：

{
  "name": "XXXXX",
  "version": "1.0.0",
  "main": "",
  "scripts": {
    "dev": "webpack --progress --colors --watch --devtool eval",
    "prod": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "alt": "^0.16.10",
    "bootstrap": "^3.3.5",
    "es6-promise": "^2.3.0",
    "i18next-client": "^1.10.2",
    "jquery": "^1.10.2",
    "react": "^0.13.3",
    "react-router": "^0.13.3",
    "toastr": "^2.1.0",
    "vis": "^4.4.0"
  },
  "devDependencies": {
    "css-loader": "^0.15.1",
    "babel-core": "^5.6.18",
    "babel-loader": "^5.3.1",
    "es6-module-loader": "^0.17.3",
    "extract-text-webpack-plugin": "^0.8.2",
    "file-loader": "^0.8.4",
    "node-libs-browser": "^0.5.2",
    "webpack": "^1.9.13",
    "url-loader": "^0.5.6",
    "style-loader": "^0.12.3",
    "webpack-dev-server": "^1.9.0"
  }
}

有关如何优化生成的bundle.js？

的任何帮助

Answer 1

简单地

webpack --production
or
webpack -p

看看http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

Answer 2

在生产配置文件中添加：

# Determine the input and output files.
$inFile = 'file'
$outFile = 'out'

# Get current time stamp for measuring duration.
$dtStart = [datetimeoffset]::UtcNow

# How many characters to read at a time.
# !! Make sure that this at least as large as the max. input.line length.
$kCHUNK_SIZE = 1000000 

Write-Host 'Compiling...'

# Note: This statement performs on-demand compilation, but only 
#       on *first* invocation in a given session.
$tsCompilation = Measure-Command {

    Add-Type @"
  using System;
  using System.IO;

  namespace net.same2u.so
  {
    public static class Helper
    {

      public static void TransformFile(string inFile, string outFile, string sep)
      {
        char[] bufChars = new char[$kCHUNK_SIZE];
        using (var sw = new StreamWriter(outFile))
        using (var sr = new StreamReader(inFile))
        {
          int pos = 0; bool eof = false;
          string bufStr, rest = String.Empty;
          while (!(eof = sr.EndOfStream) || rest.Length > 0)
          {
            if (eof)
            {
              bufStr = rest;
            }
            else
            {
              int count = sr.Read(bufChars, 0, $kCHUNK_SIZE);
              bufStr = rest.Length > 0 ? rest + new string(bufChars, 0, count) : new string(bufChars, 0, count);
            }
            if (-1 == (pos = bufStr.LastIndexOf(sep))) // should only happen at the very end
            {
              sw.Write(bufStr);
              rest = String.Empty;
            }
            else
            {
              pos += sep.Length; rest = bufStr.Substring(pos);
              sw.Write(bufStr.Substring(0, pos).Replace(Environment.NewLine, " ").Replace(sep, Environment.NewLine));
            }
          }

        }
      }

    }

  } // class Helper

"@
    if (-not $?) { exit 1 }
}

Write-Host 'Processing file...'

# Make sure the .NET framework sees the same current dir. as PS.
[System.IO.Directory]::SetCurrentDirectory($PWD)

$tsFileProcessing = Measure-Command {
  [net.same2u.so.Helper]::TransformFile($inFile, $outFile, '#@#@#')
}

Write-Host @"
Completed:
  Compilation time:      $tsCompilation
  File-processing time:  $tsFileProcessing
  Total:                 $([datetimeoffset]::UtcNow - $dtStart) 
"@

Webpack：如何优化生成的bundle.js？在我的情况下，这太大了

2 个答案: