Parcel 打包速度竟然比webpack慢？

Question

使用parcel 和 webpack 打包同一vue项目，项目结构如下

-src
    pages
        -home.vue
        -login.vue
    -index.js
    -router.js
    -app.vue

主要的第三方库
vue
lodash
jquery
vue-router
element-ui

index.js

import Vue from 'vue'
import App from './app.vue'
import router from './router.js'
import 'element-ui/lib/theme-chalk/index.css'
import { Button, Input, Select, Loading } from 'element-ui'
Vue.use(Button)
Vue.use(Input)
Vue.use(Select)
Vue.use(Loading)
// import Element from 'element-ui'
// Vue.use(Element)
import './plugin'
new Vue({
  el: '#app',
  router,
  render: (h) => h(App)
})

webpack.prod.config.js

/*eslint-disable*/
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const UglifyjsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  entry: {
    app: ['./src/index.js'],
  },
  mode: 'production',
  //devtool: 'source-map',
  plugins: [
    new CleanWebpackPlugin(['dist'], {
      verbose: true
    }),
    new MiniCssExtractPlugin({
      filename: './css/style.css'
    }),
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new VueLoaderPlugin(),
    new BundleAnalyzerPlugin()
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'vendor'
    },
    runtimeChunk: {
      name: 'runtime'
    },
    minimizer: [
      new UglifyjsPlugin(),
      new OptimizeCSSAssetsPlugin()
    ]
  },
  output: {
    filename: 'bundle-[hash].js',
    path: path.resolve(__dirname, './dist'),
    //libraryTarget: 'umd',
    //umdNamedDefine: true
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader']
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
}

parcel 打包命令

"build": "rm -rf build && NODE_ENV=production parcel build index.html -d build --no-source-maps --experimental-scope-hoisting --detailed-report 20"

打包结果
webapck:

Hash: d1103cf2d6ef5e73d46c
Version: webpack 4.30.0
Time: 4761ms
Built at: 2019-04-29 16:10:29
                                Asset       Size  Chunks             Chunk Names
                    ./css/2.style.css    187 KiB       2  [emitted]  vendor
     0.bundle-d1103cf2d6ef5e73d46c.js   1.75 KiB       0  [emitted]  app
     2.bundle-d1103cf2d6ef5e73d46c.js    194 KiB       2  [emitted]  vendor
2fad952a20fbbcfd1bf2ebb210dccf7a.woff   6.02 KiB          [emitted]
     3.bundle-d1103cf2d6ef5e73d46c.js  353 bytes       3  [emitted]
     4.bundle-d1103cf2d6ef5e73d46c.js  356 bytes       4  [emitted]
 6f0a76321d30f3c8120915e57f7bd77e.ttf   10.8 KiB          [emitted]
       bundle-d1103cf2d6ef5e73d46c.js   2.14 KiB       1  [emitted]  runtime
                           index.html  577 bytes          [emitted]

parcel:

✨  Built in 12.89s.

build/src.e6310d07.js                                                   372.2 KB    12.48s
├── node_modules/vue/dist/vue.runtime.esm.js                            92.72 KB     3.61s
├── node_modules/jquery/dist/jquery.js                                  85.97 KB     5.00s
├── node_modules/lodash/lodash.js                                       68.62 KB     6.95s
├── node_modules/vue-router/dist/vue-router.esm.js                      31.52 KB     3.34s
├── node_modules/element-ui/lib/select.js                               26.36 KB     1.36s
├── node_modules/buffer/index.js                                        25.01 KB     457ms
├── node_modules/element-ui/lib/utils/popper.js                         12.54 KB     1.65s
├── node_modules/element-ui/lib/input.js                                11.14 KB     905ms
├── node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js      9.15 KB     719ms
├── node_modules/element-ui/lib/loading.js                               7.47 KB     766ms
└── + 38 more assets

build/src.7c78d54f.css                                                 260.94 KB     9.77s
├── node_modules/element-ui/lib/theme-chalk/index.css                  211.08 KB     9.45s
├── node_modules/element-ui/lib/theme-chalk/base.css                    15.88 KB     9.38s
├── node_modules/element-ui/lib/theme-chalk/select.css                  15.44 KB     9.38s
├── node_modules/element-ui/lib/theme-chalk/button.css                  10.34 KB     9.38s
├── node_modules/element-ui/lib/theme-chalk/input.css                    6.55 KB     9.38s
└── node_modules/element-ui/lib/theme-chalk/loading.css                  1.63 KB     9.38s

build/element-icons.f5240f4e.ttf                                        54.64 KB      78ms
build/element-icons.67bee1e1.woff                                       27.54 KB      77ms
build/login.daa6053a.js                                                     1 KB     8.29s
build/home.3d8983da.js                                                      1 KB     8.30s
build/index.html                                                           359 B     429ms
build/home.3d8983da.css                                                     32 B     8.30s

打包结果是webpack从速度和大小上都碾压parcel

把element-ui去掉之后

parcel:

✨  Built in 2.54s.

build/src.b60e64dd.js                                                         270.97 KB    2.41s
├── node_modules/vue/dist/vue.runtime.esm.js                                   92.72 KB      4ms
├── node_modules/jquery/dist/jquery.js                                         85.97 KB      5ms
├── node_modules/lodash/lodash.js                                              68.62 KB      5ms
├── node_modules/vue-router/dist/vue-router.esm.js                             31.52 KB      2ms
├── node_modules/buffer/index.js                                               25.01 KB      1ms
├── node_modules/process/browser.js                                             3.46 KB      1ms
├── node_modules/base64-js/index.js                                             2.43 KB      1ms
├── node_modules/parcel-bundler/src/builtins/bundle-loader.js                   1.55 KB      2ms
├── src/router.js                                                               1.24 KB      3ms
├── node_modules/ieee754/index.js                                                 990 B      1ms
├── node_modules/parcel-bundler/src/builtins/bundle-url.js                        729 B      3ms
├── pages/me.vue                                                                  710 B      1ms
├── src/index.js                                                                  247 B    307ms
├── src/plugin.js                                                                 219 B      2ms
├── node_modules/isarray/index.js                                                 141 B      1ms
├── src/app.vue                                                                    35 B      2ms
├── node_modules/parcel-bundler/src/builtins/loaders/browser/css-loader.js          0 B      2ms
└── node_modules/parcel-bundler/src/builtins/loaders/browser/js-loader.js           0 B      1ms

build/login.daa6053a.js                                                            1 KB     71ms
build/home.3d8983da.js                                                             1 KB     71ms
build/index.html                                                                  359 B     72ms
build/src.f2621bcc.css                                                             35 B     72ms
build/home.3d8983da.css                                                            32 B     72ms

webpack:

Hash: 032e96994ffac8c6a347
Version: webpack 4.30.0
Time: 3018ms
Built at: 2019-04-29 17:27:42
                           Asset       Size  Chunks             Chunk Names
0.bundle-032e96994ffac8c6a347.js   1.03 KiB       0  [emitted]  app
2.bundle-032e96994ffac8c6a347.js   92.5 KiB       2  [emitted]  vendor
3.bundle-032e96994ffac8c6a347.js  353 bytes       3  [emitted]
4.bundle-032e96994ffac8c6a347.js  356 bytes       4  [emitted]
  bundle-032e96994ffac8c6a347.js   2.14 KiB       1  [emitted]  runtime
                      index.html  529 bytes          [emitted]

结果就是速度上parcel快一点，但是大小上webpack碾压parcel

猜想

第三方的一些插件和库影响来parcel打包效率，猜测是由于babel去处理了这些第三方代码。而webpack跳过了size超过200的文件？

请问先行者们遇到过这样的问题吗？

Answer 1

webpack4.x 已经大幅度优化了打包速度，让不能自定义输出文件路径的parcel彻底凉了