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

这在很大程度上取决于你的依赖关系。您可以忽略ie8并将您的依赖项重复数据删除以削弱某些kB：

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 2

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

$state.go('referral-link'); - 缩小捆绑

--optimize-minimize - 优化块ID

--optimize-occurrence-order - 重复相同的代码片段

有关here主题的更多信息。

Answer 3

我有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（）-更改 id的分布以获得经常使用的最小id长度 ID
webpack.NoEmitOnErrorsPlugin（）-跳过发射阶段只要编译时有错误。这样可以确保没有发出包含错误的资产

Answer 4

你可以随时尝试使用javascript＆＃34; minify＆＃34;工具。它压缩优化您的代码。在谷歌搜索javascript minify。

bundle.js在webpack项目中太大了

4 个答案: