Question

我不明白为什么......

包含100Kbytes的未使用库：

/*!
 * The buffer module from node.js, for the browser.
 *
 * @author   Feross Aboukhadijeh <feross@feross.org> <http://feross.org>
 * @license  MIT
 */
...
...

我的webpack.deploy.config.js

    'use strict';

/* eslint-env node */

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const config = {
  addVendor: function (name, path) {
    this.resolve.alias[name] = path;
    this.module.noParse.push(new RegExp(`^${name}$`));
  },

  node: {
    Buffer: false,
    global: false,
    process: false,
    setImmediate: false
  },

  entry: {
    app: [
      './src/main.jsx'
    ],
    vendors: [
      'jquery',
      'semantic',
      'semantic.css',
      'react',
      'react-dom'
    ]
  },

  resolve: { alias: {} },

  output: {
    path: `${__dirname}/build`,
    publicPath: '/',
    filename: 'bundle.js'
  },

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new CopyWebpackPlugin([{ from: './src/static', to: './' }]),
    new webpack.optimize.CommonsChunkPlugin('app', null, false),
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],

  module: {
    noParse: [],
    loaders: [
      {
        test: /\.(jsx)?$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.(js)$/,
        loader: 'babel',
        exclude: [/node_modules/, /bower_components/]
      },
      {
        test: /\.(css)$/,
        loader: 'style!css'
      },
      {
        test: /\.(scss)$/,
        loader: 'style!css!sass'
      },
      {
        test: /\.(less)$/,
        loader: 'style!css!less'
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000'
      }
    ]
  }
};

config.addVendor('jquery', `${__dirname}/bower_components/jquery/dist/jquery.min.js`);
config.addVendor('semantic', `${__dirname}/bower_components/semantic/dist/semantic.min.js`);
config.addVendor('semantic.css', `${__dirname}/bower_components/semantic/dist/semantic.min.css`);
config.addVendor('react', `${__dirname}/bower_components/react/react.min.js`);
config.addVendor('react-dom', `${__dirname}/bower_components/react/react-dom.min.js`);

module.exports = config;

我正在es6使用babel和react，代码效果很好，只是试图缩小包裹。

还使用使用http和https的交叉库（节点/浏览器），但我认为不是问题。

Answer 1

从webpack1迁移到webpack2时，我遇到了类似的问题。捆绑大小从125kb增加到164kb（最小化）。

看起来主要部分采用缓冲库，可能来自css-loader并添加了源映射支持。

我打开了一个问题https://github.com/webpack-contrib/style-loader/issues/194，看起来简单的解决方法是将node: {Buffer: false}添加到webpack配置中。详情请见：https://webpack.js.org/configuration/node/

Webpack包含bundle.js中未使用的库

1 个答案: