学习webpack4 - 抽离公共代码

栏目: 编程语言 · 发布时间: 6年前

内容简介:...持续中=======================================================我们在开发多个页面的项目的时候,有时候会在几个页面中引用某些公共的模块,这些公共模块多次被下载会造成资源浪费,如果把这些公共模块抽离出来只需下载一次之后便缓存起来了,这样就可以避免因重复下载而浪费资源,那么怎么在webpack中抽离出公共部分呢?方法如下:

...持续中

=======================================================

抽离公共代码

我们在开发多个页面的项目的时候,有时候会在几个页面中引用某些公共的模块,这些公共模块多次被下载会造成资源浪费,如果把这些公共模块抽离出来只需下载一次之后便缓存起来了,这样就可以避免因重复下载而浪费资源,那么怎么在webpack中抽离出公共部分呢?方法如下:

公共模块抽离

举例:

项目中分别有a.js, b.js, page1.js, page2.js这四个JS文件, page1.js 和 page2.js中同时都引用了a.js, b.js, 这时候想把a.js, b.js抽离出来合并成一个公共的js,然后在page1, page2中自动引入这个公共的js,怎么配置呢?如下:

配置webpack.config.js文件:

module.exports = {
  //...

  //优化项配置
  optimization: {
    // 分割代码块
    splitChunks: {
      cacheGroups: {
        //公用模块抽离
        common: {
          chunks: 'initial', 
          minSize: 0, //大于0个字节
          minChunks: 2 //抽离公共代码时,这个代码块最小被引用的次数
        }
      }
    }
  }
}

完成!

第三方模块抽离

页面中有时会引入第三方模块,比如import $ from 'jquery'; page1中需要引用,page2中也需要引用,这时候就可以用vendor把jquery抽离出来,方法如下:

module.exports = {
  //...

  //优化项配置
  optimization: {
    // 分割代码块
    splitChunks: {
      cacheGroups: {

        //公用模块抽离
        common: {
          chunks: 'initial',
          minSize: 0, //大于0个字节
          minChunks: 2, //在分割之前,这个代码块最小应该被引用的次数
        },
        
        //第三方库抽离
        vendor: {
          priority: 1, //权重
          test: /node_modules/,
          chunks: 'initial',
          minSize: 0, //大于0个字节
          minChunks: 2, //在分割之前,这个代码块最小应该被引用的次数
        }
      }
    }
  }
}

注意:这里需要配置权重 priority,因为抽离的时候会执行第一个common配置,入口处看到jquery也被公用了就一起抽离了,不会再执行wendor的配置了,所以加了权重之后会先抽离第三方模块,然后再抽离公共common的,这样就实现了第三方和公用的都被抽离了。

不加权重之前:

jquery也被抽离到了公共js里

学习webpack4 - 抽离公共代码

加了权重之后:

学习webpack4 - 抽离公共代码


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

即将到来的场景时代

即将到来的场景时代

罗伯特•斯考伯、谢尔•伊斯雷尔 / 赵乾坤 周宝曜 / 北京联合出版公司 / 2014-5-1 / 42

科技大神、全球科技创新领域最知名记者 罗伯特·斯考伯:“技术越了解你,就会为你提供越多好处!” 互联网的炒作点一个一个不停出现,大数据、3D打印、O2O等,无不宣扬要颠覆商业模式。但是,互联网进入移动时代,接下来到底会发生什么?移动互联网时代真正带来哪些改变?这具体会怎样影响我们每一个人的生活?商业真的会被颠覆?目前为止没有一本书给出答案。 《即将到来的场景时代》不是就一个炒作点大加谈......一起来看看 《即将到来的场景时代》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具