如何减小vendor.js文件的大小，加快打包速度

1、webpack3打包第三方模块配置

// 打包第三方插件
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '[name].js',
      // 可以是已经存在的chunk（一般指入口文件）对应的name，那么就会把公共模块代码合并到这个chunk上；否则，会创建名字为name的commons chunk进行合并
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
      // chunks： 指定source chunk，即指定从哪些chunk当中去找公共模块，省略该选项的时候，默认就是entry chunks
    }),

上述配置将会将node_modules中被main.js入口文件（以及子文件）引用的js文件打包合并。当引用的第三方模块越多或者比较大时，打包成的vendor.js文件也会比较大，会严重降低打包速度和页面加载速度。在vue项目中webpack将会把vue.js、vue-router.js、vuex.js、element-ui.js等文件打包到vendor.js中，但是这些文件都是可以通过CDN引入的，特别是element-ui.js文件比较大，使用CDN引入会大大减小vendor.js文件大小。下面我们试试通过CDN引入第三方模块能不能加快打包速度和降低vendor.js大小。

1、在index.html模板中通过CDN引入第三方模块

2、在webpack.base.conf.js中加入externals外部扩展

这里解释一下externals 配置选项的作用：

• 官网解释：

webpack 中的 externals 配置提供了 不从 bundle 中引用依赖的方式。解决的是，所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。

怎么理解呢，意思是如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。

这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间，但又不影响运用第三方库的方式，例如import方式等。

比如：上图我们配置了'element-ui': 'ELEMENT'，其中'ELEMENT'是