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...

相关推荐
musk12129 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘38 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref