webpack打包优化实践

事情缘由

近段时间在做基于scratch3.0的改造项目。基于scratch-gui改造，项目本身已经很大了，然后里面还要用到scratch-blocks,scratch-vm,scratch-render等外部第三方项目。官方的配置是所有的东西打入一个lib中，所有的html都使用这一个lib。

现在有一个需求是：h5页面仅仅展示scratch做出来的作品，但是目前加载很慢，需要优化。

scratch原生的打包配置如下(html-webapck-plugin@3.2.0)

 

 打包结果全部js在lib.min中，有26M左右

 

 优化思路

第一阶段（不更改代码，仅仅做分包的优化）：

• 利用webpack optimization.splitChunks的vendors配置将所有的第三方包提取到vendors中【本人额外配置了一个所有入口都使用的第三方包bundle：‘vender.min'】；
• 利用webpack optimization.splitChunks的default配置【默认的配置】自动提取各个入口js的共用代码组成bundle的功能。
• 分离出manifest文件，确保没有更改的包打包结果不会更改。

上面基本都利用了默认的配置【不配置的属性即使用默认值】，webpack默认的配置【每一个版本还不太一样，比如最近的maxAsyncRequests已经是6了，maxInitialRequests为4】如下

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

View Code