26-第三方库抽离打包optimize
作为一个程序员，无论是写什么程序都i要有一颗不断优化的心。webpack在优化这条路上，也为我们作了很多配置， 我们就看看工作中常用的webpack优化黑技能。
ProvidePlugin和import
我们知道如何引入第三方类库，并引入了jquery，在引用JQuery时我们用了两种方法，
第一种是import，第二种时使用ProvidePlugin插件。那两种引入方法有什么区别那?
- import引入方法
- 引用后不管你在代码中使用不适用该类库，都会把该类库打包起来，这样有时就会让代码产生冗余。
- ProvidePlugin引入方法
- 引用后只有在类库使用时，才按需进行打包，所以建议在工作使用插件的方式进行引入。
抽离JQuery
上边ProvidePlugin只是优化的第一步，工作中你会发现，不适用的类库几乎我们也不会引入，
所以上边只是一个必要操作的第一步。那往往把第三方类库抽离出来，才是最好的解决方法。
修改入口文件
抽离的第一步是修改入口文件，把我们的JQuery也加入到入口文件中，看下面的代码。
module.exports = {
entry: {
entry: './src/entry.js',
jquery: 'jquery'
},
}
引入插件
我们需要引入optimize优化插件，插件里边是需要配置的，具体配置项看下面的代码。
minChunks一般都是固定配置，但是不写是不行的，你会打包失败。 filename是可以省略的，这是直接打包到了打包根目录下，我们这里直接打包到了dist文件夹下边。 配置完成后，我们可以先删掉以前打包的dist目录，然后用webpack再次打包，你会发现jquery被抽离了出来，并且我们的entry.js文件变的很小。
多个第三方类库抽离
会了如何抽离Jquery，但是在实际开发中，我们会引用不止一个第三方类库，这时也需要抽离。我们拿引入Vue为例，看看如何抽离出来。
第一步:我们先用npm 进行安装。
npm instawll vue --save
注意这里是–save，而不是–save-dev。因为这个类库在生产环境中也是要使用的。
##在入口配置中引入vue和jquery
只是多比上边多加了一个vue选项。
修改CommonsChunkPlugin配置
需要修改两个位置
- 第一个是在name属性里把原来的字符串改为数组，因为我们要引入多个模块，所以是数组；
- 第二个是在filename属性中把我们输出的文件名改为匹配符号
[name],这项操作就是打包出来的名字跟随我们打包前的模块。 下面是我们修改的代码，你可以跟jquery抽离时对比一下。
配置好后，我们就可以在控制台输入webpack进行打包了。你会看到我们预想的结果，jquery和vue都被我们抽离出来了。
总结
在项目开发中，我们很使用很多第三方类库，那好的做法就是把第三方这些类库全部抽离处理，这样在项目维护和性能上都是不错的选择。 希望学会这个技巧后，你也能在工作中使用上。