专栏首页wfaceboss(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文件变的很小。

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被抽离了出来。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 省市县,区的查询(通过区开始)(导出的接口实现)

    wfaceboss
  • c# 框架学习(nop )总结-------编辑功能

    wfaceboss
  • (20/24) webpack实战技巧:watch实现热打包和添加代码备注

    在前面的学习中,我们一直使用webpack-dev-server充当(本地)服务器和完成打包任务,但是当出项目团队联合开发,共同使用一个服务器时,这时候我们需要...

    wfaceboss
  • MVN打包

    打包后会在target目录下生成一个xxx-jar-with-dependencies.jar文件,这个文件不但包含了自己项目中的代码和资源,还包含了所有依赖包...

    Janti
  • C#怎样用文件读写在文件的原有基础上追加一行数据

    首先添加命名空间using System.IO; 这里有两种方法,希望对你有帮助,操作文件时,一定要记得及时关闭流。

    zls365
  • 企业安全建设之路:端口扫描(下)

    0x00、前言 在企业安全建设过程当中,我们也不断在思考,做一个什么样的端口扫描才能企业业务需求。同时,伴随着企业私有云、混合云以及公有云业务部署环境的不断变...

    FB客服
  • 看完你就会!Python自动化开发必备项目之博客网站全实现

    本文由马哥教育Python自动化实战班6期学员推荐,转载自互联网,作者为 lm409,内容略经小编改编和加工,观点跟作者无关,最后感谢作者的辛苦贡献与付出。 断...

    小小科
  • Vue项目使用AES做加密

    用户1174387
  • Asp.Net Forms认证在移动平台中遇到的一个问题以及调查过程

    我们项目的网站的移动版是基于Asp.Net平台开发的,用户登录也是基于Asp.Net的Forms认证,在整个开发和测试过程中没有发现任何客户登录异常,但是发布后...

    葡萄城控件
  • SAP云平台CloudFoundry中的用户自定义变量

    CloudFoundry应用的manifest.xml里的env区域,允许用户自定义变量,如下图5个变量所示。

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券