bundle.js webpack 项目太大

Question

我正在尝试创建一个 react + babel + webpack 项目。它可以工作，但是 bundle.js 文件有 950KB 大。

bundle.js 总是那么大吗？如果没有，我该如何缩小尺寸？

这是我的 webpack.config.js:

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

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
entry: APP_DIR + '/index.jsx',
output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
},
plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
],
module : {
    loaders : [
      {
        test : /\.jsx?/,
        loader : 'babel',
        query:
        {
            presets: ["es2015", 'react']
        }
      }
    ]
}
};

module.exports = config;

Answer 1

您可以随时尝试使用 javascript "minify" 工具。它压缩优化您的代码。在 google 上搜索 javascript 缩小。

Answer 2

通常包含很多依赖项，因此这种大小并不少见。生成包时尝试使用以下标志：

--optimize-minimize - 缩小包

--optimize-occurrence-order - 优化区块 ID

--optimize-dedupe - 删除相同的代码片段

有关该主题的更多信息 here。

Answer 3

这在很大程度上取决于您的依赖项。您可以忽略 ie8 并删除您的依赖项以减少一些 kBs:

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8: true,
        warnings: false
      },
      mangle: {
        screw_ie8: true
      },
      output: {
        comments: false,
        screw_ie8: true
      }
    })
  ]
};

Answer 4

我有 webpack 6.0.1，最近发现 webpack 的 documentation 发生了变化。我测试、使用并可以为 webpack.config.js 建议以下配置思路。您可以尝试这些想法并减少包大小：

//webpack.config.js
module.exports = {
  ...
  devtool: 'cheap-module-source-map',
  ...
  plugins : [
    ...
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.HashedModuleIdsPlugin({
      hashFunction: 'sha256',
      hashDigest: 'hex',
      hashDigestLength: 4
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],

  ...

  optimization: {
    namedModules: false,
    namedChunks: false,
    nodeEnv: 'production',
    flagIncludedChunks: true,
    occurrenceOrder: true,
    sideEffects: true,
    usedExports: true,
    concatenateModules: true,
    splitChunks: {
      cacheGroups: {
        commons: {
            test: /[\/]node_modules[\/]/,
            name: 'vendor',
            chunks: 'all'
        }
      },
      minSize: 30000,
      maxAsyncRequests: 5,
      maxAsyncRequests: 3,      
    },
    noEmitOnErrors: true,
    minimize: true, 
    minimizer: [
      // we specify a custom UglifyJsPlugin here to get source maps in production
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: false,
          ecma: 6,
          mangle: true
        },
        sourceMap: true
      })
    ],
    removeAvailableModules: true,
    removeEmptyChunks: true,
    mergeDuplicateChunks: true,    
  },
...
}

评论：

webpack.optimize.ModuleConcatenationPlugin() - 连接作用域将所有模块合并到一个闭包中，并允许您的代码具有在浏览器中更快的执行时间
webpack.HashedModuleIdsPlugin() - 使散列基于模块的相对路径，生成一个四字符的字符串作为模块 ID
webpack.optimize.OccurrenceOrderPlugin() - 改变 ids 的分布以获得经常使用的最小 id 长度编号
webpack.NoEmitOnErrorsPlugin() - 跳过发射阶段每当编译时出现错误。这确保没有发出的资产包含错误

bundle.js webpack 项目太大

bundle.js too big in webpack project

javascript

frontend

reactjs

webpack

babeljs