1.優化第一步--選用引入方式

在前面的學習中我們對於如何引入第三方類庫（Jquery）推薦了兩種方式，第一種是import引入的方式，第二種是ProvidePlugin外掛。那兩種引入方法有什麼區別那?

• import引入方法：引用後不管你在程式碼中使用不使用該類庫，都會把該類庫打包起來，這樣有時就會讓程式碼產生冗餘。（引用即打包）

• ProvidePlugin引入方法：引用後只有在類庫使用時，才按需進行打包，所以建議在工作使用外掛的方式進行引入。 （按需打包）

 因此在日常開發中選用ProvidePlugin外掛的方式進行打包，可在一定程度上減輕程式碼的冗餘。

2.優化第二步--三方類庫分離

2.1 單個三方類庫分離

2.1.1 第一步：修改入口檔案

抽離的第一步是修改入口檔案，把我JQuery加入到入口檔案中:

config/webpack.entry.js檔案：

//宣告entry變數
const entry={};
//宣告路徑屬性
entry.path={
    entry:'./src/entry.js',
    jquery:'jquery'  //需要分離的檔案
};

//進行模組化
module.exports=entry;

2.1.2 第二步：引入外掛

引入optimize優化外掛，並進行相關配置，如下：

new
 
 webpack.optimize.CommonsChunkPlugin({
    //name對應入口檔案中的名字，我們起的是jquery
    name:'jquery',
    //把檔案打包到哪裡，是一個路徑
    filename:"assets/js/jquery.min.js",
    //最小打包的檔案模組數，這裡直接寫2就好
    minChunks:2
}),

minChunks一般都是固定配置，但是不寫是不行的，你會打包失敗。

filename是可以省略的，這是直接打包到了打包根目錄下，我們這裡直接打包到了dist資料夾下的assets/js/下。

配置完成後，我們先刪掉以前打包的dist目錄，然後用webpack再次打包，你會發現jquery被抽離了出來，並且我們的entry.js檔案變的很小。

2.2 多個第三方類庫抽離

 在實際開發中，我們會引用不止一個第三方類庫，這時也需要抽離，這裡我們在引入Vue相關操作如下：

2.2.1 安裝Vue

npm instawll vue --save

因為這個類庫需要在生產環境中使用，故採用–save。

2.2.2 修改入口檔案

//宣告entry變數
const entry={};
//宣告路徑屬性
entry.path={
    entry:'./src/entry.js',
    jquery:'jquery' , //需要分離的檔案
     vue:'vue'
};

//進行模組化
module.exports=entry;

相比第一種只是多加了一個vue選項。

2.2.3 修改外掛配置

修改CommonsChunkPlugin配置

 需要修改兩個位置：

• 第一個是在name屬性裡把原來的字串改為陣列，因為我們要引入多個模組，所以是陣列；

• 第二個是在filename屬性中把我們輸出的檔名改為匹配付[name],這項操作就是打包出來的名字跟隨我們打包前的模組。

修改程式碼如下：

new webpack.optimize.CommonsChunkPlugin({
    //name對應入口檔案中的名字，我們起的是jQuery
    name:['jquery','vue'],
    //把檔案打包到哪裡，是一個路徑
    filename:"assets/js/[name].js",
    //最小打包的檔案模組數，這裡直接寫2就好
    minChunks:2
}),

2.2.4 打包

webpack

配置完成後，我們先刪掉以前打包的dist目錄，然後用webpack再次打包，你會發現jquery、vue被抽離了出來。