javascript – Webpack和大型供应商捆绑包

2023年3月2日 235次阅读

我发现我的webpack供应商捆绑非常大(最初约1.6 MB).使用webpack-bundle-size-analyzer后,我发现角度对此有很大影响.

➜  dapper-ui git:(master) webpack --config ./conf/webpack-dist.conf.js --json | webpack-bundle-size-analyzer
angular: 1.13 MB (25.9%)
lodash: 526.94 KB (11.8%)
moment: 429.12 KB (9.58%)
angular-ui-router: 339.35 KB (7.58%)
chart.js: 311.27 KB (6.95%)
angular-ui-bootstrap: 264.26 KB (5.90%)
ng-table: 197.55 KB (4.41%)
angular-animate: 147.1 KB (3.29%)
angularjs-slider: 87.52 KB (1.95%)
validator: 70.85 KB (1.58%)
bootstrap-sass: 68.07 KB (1.52%)
buffer: 47.47 KB (1.06%)
angular-resource: 34.45 KB (0.769%)
angular-messages: 27.39 KB (0.612%)
angular-file-upload: 20.36 KB (0.455%)
angular-sticky-plugin: 19.06 KB (0.426%)
color-convert: 16.53 KB (0.369%)
ng-tags-input: 15.62 KB (0.349%)
angular-aria: 14.87 KB (0.332%)
angular-ui-bootstrap-datetimepicker: 13.26 KB (0.296%)
angular-chart.js: 12.7 KB (0.284%)
chartjs-color: 10.96 KB (0.245%)
chartjs-color-string: 5.9 KB (0.132%)
color-name: 4.49 KB (0.100%)
base64-js: 3.4 KB (0.0760%)
angular-validation-match: 2.06 KB (0.0460%)
ieee754: 2.01 KB (0.0448%)
css-loader: 1.47 KB (0.0328%)
webpack: 1.03 KB (0.0230%)
isarray: 132 B (0.00288%)
<self>: 622.84 KB (13.9%)

我试过检查缩小的角度文件是~160kb.我猜它没有使用或显示缩小的尺寸.无论如何,我使用的是Uglify,所以我希望它的大小相似吗？

我尝试使用webpack别名,使webpack使用缩小的捆绑包,但这并没有减少供应商捆绑.

目前我将供应商捆绑分为4个部分,因此可以并行下载以加快速度,但仍然很好奇如何做得更好,为什么角度和其他库如此之大,即使提供的缩小代码也是如此小.

我的webpack配置：

const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const pkg = require('../package.json');
const autoprefixer = require('autoprefixer');

const deps = Object.keys(pkg.dependencies);
const vendorNumInBundle = Math.ceil(deps.length / 4)

module.exports = {
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint'
      }
    ],

    loaders: [
      {
        test: /.json$/,
        loaders: [
          'json'
        ]
      },
      {
        test: /\.(css|less)$/,
        loaders: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'less-loader'])
      },
      {
        test: /\.scss$/,
        loaders: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'sass-loader'])
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'ng-annotate'
        ]
      },
      {
        test: /.html$/,
        loaders: [
          'html'
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {unused: true, dead_code: true, warnings: false}, // eslint-disable-line camelcase
      comments: false
    }),
    new ExtractTextPlugin('index-[contenthash].css'),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor5', 'vendor4', 'vendor3', 'vendor2', 'vendor1'],
      minChunks: Infinity
    }),
    function()
    {
        this.plugin("done", function(stats)
        {
            if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') == -1)
            {
                console.log(stats.compilation.errors);
                process.exit(1); // or throw new Error('webpack build failed.');
            }
            // ...
        });
    }
  ],
  postcss: () => [autoprefixer],
  output: {
    path: path.join(process.cwd(), conf.paths.dist),
    filename: '[name]-[hash].js'
  },
  entry: {
    app: `./${conf.path.src('index')}`,
    vendor1: deps.slice(0, vendorNumInBundle),
    vendor2: deps.slice(vendorNumInBundle, vendorNumInBundle * 2),
    vendor3: deps.slice(vendorNumInBundle * 2, vendorNumInBundle * 3),
    vendor4: deps.slice(vendorNumInBundle * 3),
    vendor5: [
      './src/assets/js/angular-natural-language.min.js',
      './src/assets/js/angular-img-cropper.js',
      './src/assets/js/satellizer.min.js',
      './src/assets/js/satellizer.min.js',
      './src/assets/js/angular-bootstrap-toggle',
    ]
  }
};

最佳答案

I guess its not using or showing the minified size.

这是对的.您看到的输出是针对未公开的库版本.请参阅自述文件中的Important Note about Minified Code.

未明细版本的大小信息有助于大致了解不同模块占用的包的比例.如果你想在这个工具的输出中看到缩小的大小,你需要配置Webpack来使用加载器来缩小单个模块,而不是仅仅在过程结束时缩小整个包,这就是你使用时发生的事情. webpack –optimize-minimize.

点赞