如何减小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引入第三方模块

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>vue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
  </body>
</html>

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'是<script src="https://unpkg.com/element-ui/lib/index.js"></script>导入的模块名，'element-ui': 'ELEMENT'就是进行了一个映射，模块名变成了'element-ui'，在main.js中我们还是可以通过import ElementUI from 'element-ui'引入。externals配置就是让我们还是能够import等方式引入模块，虽然模块是通过CDN引入