webpack打包优化之去重

在使用webpack打包时,去重是一个很重要的打包优化方式,同一段代码,如果被多次引用,会随着引用次数的增加而不断增大包的体积。所以了解webpack的去重方式及如何去重十分重要。

注意:本文主要描述同步引入。对于动态导入,webpack默认会自动抽取为单独的文件。

情景:

  1. 要优化的是一个js库
  2. 要优化的是一个带页面的系统
优化js库

如果我们要优化的是一个js库,我们需要做的是,提取公共代码,减小库打包后的体积。这个时候参考webpack的官方描述去重方式,我们发现有两种。

  1. 使用shared+dependOn的方式
  2. 使用splitChunks的方式

经过测试发现,这两种方式打出来的包,确实是抽取出了公共部分(暂且称呼他为:common-lib.js),但是common-lib并不会自动注入到使用他的地方,所以当业务系统在使用我们的组件库的时候就会报错,因为缺少了common-lib。

所以对于js库的去重,我们可以将公共代码,单独发布一个npm包,然后在给js库打包的时候将common-lib给剔除掉。剔除方式就是在webpack配置文件中添加externals配置。(实际上组件库中一些常用的第三方库,就是在这个地方进行排除)

java 复制代码
module.exports = {
  //...
  externals: 'jquery',
};
module.exports = {
  //...
  externals: ['jquery','common-lib',/^echarts$/],
};

externals的作用就是将某些库指定为外部扩展,当打包的之后只打包到import common form 'common-lib'就停止了,不会再将common-lib打包到我们最终的bundle包中。当业务系统使用我们的js库的时候去自动向npm仓库中下载,这也解释了为啥我们只yarn add了一个依赖,node_modules里却增加了好几个依赖的问题。

优化页面系统

页面系统的优化目标也是尽可能减少最终打包的体积,减小浏览器加载我们页面的时候的下载量。

对于页面系统,是否将公共部分拆成npm就无所谓了,因为没有人会帮他托底,再去下载npm包,浏览器只会读取js,html。

这个时候才是使用webpack官方推荐配置的时候,因为common-lib不会自动注入的问题,html会帮他解决。

  1. 使用shared+dependOn的方式

    css 复制代码
    module.exports = {
        ...// 这样配置会将lodash抽取出一个单独的文件,在html中引入即可
      entry: {
        index: {
          import: './src/index.js',
          dependOn: 'shared'
        },
        print: {
          import: './src/print.js',
          dependOn: 'shared'
        },
        shared: 'lodash'
      }
    }
  2. 使用splitChunks的方式

css 复制代码
module.exports = {
    ...// 这样配置会将系统中重复代码进行抽取,也是会生成一个一个的单独文件,需要在html中手动引入。
    entry: {
        index: './src/index.js',
        print: './src/print.js'
    },
    optimization: {
        splitChunks: {
            chunks: 'all', // 配置很多,不具体描述了,请参考官网。
        },
    }
}

另:HtmlWebpackPlugin提供了自动给html注入js的方式,详细使用方式可以查阅github.com/jantimon/ht...

相关推荐
阳树阳树1 小时前
signal-新的状态管理模式
前端·javascript
fakaifa1 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
木木黄木木1 小时前
HTML5手写签名板项目实战教程
前端·html·html5
姑苏洛言1 小时前
基于微信小程序实现幸运大转盘页面
前端
前端极客探险家2 小时前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya2 小时前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me2 小时前
react使用eventBus在不同模块间进行通信
前端·react.js
__不想说话__2 小时前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
一个小潘桃鸭2 小时前
需求:对表格操作列中的操作进行局部刷新
前端
番茄比较犟2 小时前
Combine知识点switchToLatest
前端