(21/24) webpack實戰技巧：webpack對三方類庫的優化操做

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被抽離了出來。