webpack打包优化之去重

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

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

情景：

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

优化js库

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

使用shared+dependOn的方式
使用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会帮他解决。

使用shared+dependOn的方式

css 复制代码

module.exports = {
    ...// 这样配置会将lodash抽取出一个单独的文件，在html中引入即可
  entry: {
    index: {
      import: './src/index.js',
      dependOn: 'shared'
    },
    print: {
      import: './src/print.js',
      dependOn: 'shared'
    },
    shared: 'lodash'
  }
}

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