脚本宝典收集整理的这篇文章主要介绍了

学习webpack4 – 抽离公共代码

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

学习webpack4 - 基础配置
学习webpack4 - HTML处理
学习webpack4 - 样式处理
学习webpack4 - ES6语法转化
学习webpack4 - 第三方模块的使用
学习webpack4 - 抽离公共代码

...持续中

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

抽离公共代码

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

公共模块抽离

举例:

项目中分别有a.js, b.js, page1.js, page2.js这四个JS文件, page1.jspage2.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里
clipboard.png

加了权重之后:

clipboard.png

总结

以上是脚本宝典为你收集整理的

学习webpack4 – 抽离公共代码

全部内容,希望文章能够帮你解决

学习webpack4 – 抽离公共代码

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过