webpack02 优化第三方库的打包性能

在引入第三方的库之后使用webpack打包时，默认会将这些第三方的库重新打包，但是实际上需要重新打包的只有业务代码，这些第三方库是完全不用重新打包的，所以需要对这个过程进行优化。

1 externals

Webpack可以配置externals来将依赖的库指向全局变量，从而不再打包这个库，比如对于React：

import React from 'react';

如果你在Webpack.config.js中配置了externals：

module.exports = {
  externals: {
    'react': 'window.React'
  }
  //其它配置忽略...... 
};

等于让Webpack知道，对于react这个模块就不要打包，直接指向window.React就好。不过别忘了加载react.min.js（也就是手动的在index.html中引入react），让全局中有React这个变量。

配置externals的缺陷：

1. 手动引入react.min.js，感觉还是不是很爽；
2. 有一些库根本没有提供生产环境的文件
3. 存在反复依赖的库（比如有的库import了react）也会导致这个库被重新打包

2 CommonsChunkPlugin

CommonsChunkPlugin可以将公共包提取出来，还是拿react举例：

const vue = require('react')
{
  entry: {
   // bundle是我们要打包的项目文件的导出名字， app是入口js文件
   bundle: 'app'，
   // vendor就是我们要打包的第三方库最终生成的文件名，数组里是要打包哪些第三方库, 如果不是在node——m