(21/24) webpack实战技巧：webpack对三方类库的优化操作

阳光穿透心脏的1/2处 2022-01-06 23:53 153阅读 0赞

[(21/24) webpack实战技巧：webpack对三方类库的优化操作][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文件变的很小。

![860581-20181221193311734-1737478400.png][]![860581-20181221195513443-1112131084.png][]

## 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选项。

![860581-20181221195917000-1745353629.png][]

### 2.2.3 修改插件配置 ###

修改CommonsChunkPlugin配置

需要修改两个位置：

*  第一个是在name属性里把原来的字符串改为数组，因为我们要引入多个模块，所以是数组；
 *  第二个是在filename属性中把我们输出的文件名改为匹配付\[name\],这项操作就是打包出来的名字跟随我们打包前的模块。

修改代码如下：

new webpack.optimize.CommonsChunkPlugin({
        //name对应入口文件中的名字，我们起的是jQuery
        name:['jquery','vue'],
        //把文件打包到哪里，是一个路径
        filename:"assets/js/[name].js",
        //最小打包的文件模块数，这里直接写2就好
        minChunks:2
    }),

### ![860581-20181221195829216-36840780.png][] ###

### 2.2.4 打包 ###

webpack

配置完成后，我们先删掉以前打包的dist目录，然后用webpack再次打包，你会发现jquery、vue被抽离了出来。

![860581-20181221195554797-1683404651.png][]![860581-20181221195634612-1764186423.png][]

posted on 2018-12-21 20:00 [WFaceBoss][] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

转载于:https://www.cnblogs.com/wfaceboss/p/10157077.html

[21_24_ webpack_webpack]: https://www.cnblogs.com/wfaceboss/p/10157077.html
[860581-20181221193311734-1737478400.png]: https://img2018.cnblogs.com/blog/860581/201812/860581-20181221193311734-1737478400.png
[860581-20181221195513443-1112131084.png]: /images/20211227/c925811a6637401d808205925d5df1bd.png
[860581-20181221195917000-1745353629.png]: /images/20211227/d878e44532cd445c87305a9f5cb0a3f8.png
[860581-20181221195829216-36840780.png]: /images/20211227/77fb7b0d5f1d4e14aa06f12f16aa6910.png
[860581-20181221195554797-1683404651.png]: https://img2018.cnblogs.com/blog/860581/201812/860581-20181221195554797-1683404651.png
[860581-20181221195634612-1764186423.png]: /images/20211227/aa0218ef11184924b0f68f4047ba4617.png
[WFaceBoss]: https://www.cnblogs.com/wfaceboss/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=10157077