stephencookdev / speed-measure-webpack-plugin

⏱ See how fast (or not) your plugins and loaders are, so you can optimise your builds
MIT License
2.4k stars 80 forks source link

Incompatibility with 'autodll-webpack-plugin' #75

Open huixisheng opened 5 years ago

huixisheng commented 5 years ago

image

webpack.config.js

    plugins.push(new AutoDllPlugin({
      inject: true,
      filename: '[name]_[hash:8].js',
      debug: true,
      path: './dll',
      entry: {
        vendor: [
          'vue-router',
          'vuex',
          'nprogress',
        ],
      },
    }));
vzaidman commented 5 years ago

I would like to fix it. Does anybody can provide me with any help with it?

dalaoque commented 4 years ago

Webpack config plugins list order with speed-measure-webpack-plugin

It used concat()

The source code is as follows

https://github.com/stephencookdev/speed-measure-webpack-plugin/blob/24052675160ceaf42f53d06e3da538ecf04e9e81/index.js#L64

SpeedMeasurePlugin was after DllReferencePlugin or AutoDllPlugin and at the bottom on the plugins list.

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin();

const webpackConfig = smp.wrap({
  plugins: [
    new MyPlugin(),
    new MyOtherPlugin()
  ]
});

console.log('webpackConfig: ', webpackConfig)

webpackConfig:

{
  ...,
  plugins: [
    DefinePlugin { definitions: [Object] },
    HtmlWebpackPlugin {
      options: [Object],
      childCompilerHash: undefined,
      assetJson: undefined,
      hash: undefined,
      version: 4
    },
    MiniCssExtractPlugin { options: [Object] },
    CopyPlugin { patterns: [Array], options: {} },
    DllReferencePlugin { options: [Object] },
    AddAssetHtmlPlugin { assets: [Array], addedAssets: [] },
    SpeedMeasurePlugin {
      options: {},
      timeEventData: {},
      smpPluginAdded: true,
      wrap: [Function: bound wrap],
      getOutput: [Function: bound getOutput],
      addTimeEvent: [Function: bound addTimeEvent],
      apply: [Function: bound apply],
      provideLoaderTiming: [Function: bound provideLoaderTiming]
    }
  ]
  }
}

So, Put the SpeedMeasurePlugin in front of the DllReferencePlugin or AutoDllPlugin.

  1. Not used wrap
    
    const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const webpackConfig = { plugins: [ new SpeedMeasurePlugin(),

new MyPlugin(),
new MyOtherPlugin(),
...

] })


2. Change sequence
```js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin();

const smpWrapConfig = smp.wrap({
  plugins: []
});
const webpackConfig = {
  entry: {
    app: './src/index.js',
  },
  output: {},
  plugins: [
    new MyPlugin(),
    new MyOtherPlugin()
  ]
}
webpackConfig.unshift(...smpWrapConfig.plugins)

module.exports = webpackConfig
  1. It's up to the author. ^_^