Webpack:如何优化生成的bundle.js?对我来说太大了

Webpack : How to optimize the generated bundle.js? It's way too big in my case

本文关键字：js bundle 对我来说 大了 何优化 优化 Webpack      更新时间：2023-09-26

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

  • 组件管理:使用require(...)
  • 性能:尽可能小的大小，尽可能少的请求服务器。
但是对于我刚刚启动的应用程序(目前只有四个React组件)，Webpack生成的bundle.js文件是3.87Mb!!

我很确定Webpack捆绑了我永远不需要的东西。我想知道如何优化生成的文件…我如何"调试"Webpack的进程?

My 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有什么帮助吗?

simply

webpack --production
or
webpack -p

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

将此添加到您的生产配置文件中:

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
      },
      output: {
        comments: false,
      },
      exclude: [/'.min'.js$/gi] // skip pre-minified libs
    }),
    new webpack.IgnorePlugin(/^'.'/locale$/, [/moment$/]), //https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /'.js$|'.css$|'.html$/,
      threshold: 10240,
      minRatio: 0
    })
  ],
相关文章：