1.優(yōu)化第一步--選用引入方式

在前面的學(xué)習(xí)中我們對(duì)于如何引入第三方類庫(kù)（jquery）推薦了兩種方式，第一種是import引入的方式，第二種是ProvidePlugin插件。那兩種引入方法有什么區(qū)別那?
import引入方法：引用后不管你在代碼中使用不使用該類庫(kù)，都會(huì)把該類庫(kù)打包起來(lái)，這樣有時(shí)就會(huì)讓代碼產(chǎn)生冗余。（引用即打包）
ProvidePlugin引入方法：引用后只有在類庫(kù)使用時(shí)，才按需進(jìn)行打包，所以建議在工作使用插件的方式進(jìn)行引入。 （按需打包）
因此在日常開(kāi)發(fā)中選用ProvidePlugin插件的方式進(jìn)行打包，可在一定程度上減輕代碼的冗余。

2.優(yōu)化第二步--三方類庫(kù)分離

2.1 單個(gè)三方類庫(kù)分離

2.1.1 第一步：修改入口文件

抽離的第一步是修改入口文件，把我jquery加入到入口文件中:
config/webpack.entry.js文件：

//聲明entry變量
const entry={};
//聲明路徑屬性
entry.path={
    entry:'./src/entry.js',
    jquery:'jquery'  //需要分離的文件
};

//進(jìn)行模塊化
module.exports=entry;

2.1.2 第二步：引入插件

引入optimize優(yōu)化插件，并進(jìn)行相關(guān)配置，如下：

new webpack.optimize.CommonsChunkPlugin({
    //name對(duì)應(yīng)入口文件中的名字，我們起的是jquery
    name:'jquery',
    //把文件打包到哪里，是一個(gè)路徑
    filename:"assets/js/jquery.min.js",
    //最小打包的文件模塊數(shù)，這里直接寫(xiě)2就好
    minChunks:2
}),

minChunks一般都是固定配置，但是不寫(xiě)是不行的，你會(huì)打包失敗。
filename是可以省略的，這是直接打包到了打包根目錄下，我們這里直接打包到了dist文件夾下的assets/js/下。
配置完成后，我們先刪掉以前打包的dist目錄，然后用webpack再次打包，你會(huì)發(fā)現(xiàn)jquery被抽離了出來(lái)，并且我們的entry.js文件變的很小。

分離前.png

分離后.png

2.2 多個(gè)第三方類庫(kù)抽離

在實(shí)際開(kāi)發(fā)中，我們會(huì)引用不止一個(gè)第三方類庫(kù)，這時(shí)也需要抽離，這里我們?cè)谝?Vue相關(guān)操作如下：

2.2.1 安裝Vue

npm instawll vue --save

因?yàn)檫@個(gè)類庫(kù)需要在生產(chǎn)環(huán)境中使用，故采用–save。

2.2.2 修改入口文件

//聲明entry變量
const entry={};
//聲明路徑屬性
entry.path={
    entry:'./src/entry.js',
    jquery:'jquery' , //需要分離的文件
     vue:'vue'
};

//進(jìn)行模塊化
module.exports=entry;

相比第一種只是多加了一個(gè)vue選項(xiàng)。

image.png

2.2.3 修改插件配置

修改CommonsChunkPlugin配置
需要修改兩個(gè)位置：

1. 第一個(gè)是在name屬性里把原來(lái)的字符串改為數(shù)組，因?yàn)槲覀円攵鄠€(gè)模塊，所以是數(shù)組；
2. 第二個(gè)是在filename屬性中把我們輸出的文件名改為匹配付[name],這項(xiàng)操作就是打包出來(lái)的名字跟隨我們打包前的模塊。
   修改代碼如下：

new webpack.optimize.CommonsChunkPlugin({
    //name對(duì)應(yīng)入口文件中的名字，我們起的是jQuery
    name:['jquery','vue'],
    //把文件打包到哪里，是一個(gè)路徑
    filename:"assets/js/[name].js",
    //最小打包的文件模塊數(shù)，這里直接寫(xiě)2就好
    minChunks:2
}),

image.png

2.2.4 打包

webpack

配置完成后，我們先刪掉以前打包的dist目錄，然后用webpack再次打包，你會(huì)發(fā)現(xiàn)jquery、vue被抽離了出來(lái)。

分離后.png

分離后文件.png

總結(jié)：
在項(xiàng)目開(kāi)發(fā)中，我們很使用很多第三方類庫(kù)，那好的做法就是把第三方這些類庫(kù)全部抽離處理，這樣在項(xiàng)目維護(hù)和性能上都是不錯(cuò)的選擇。