webpack 拆包策略

3 阅读1分钟

背景:1. 公司要求项目首屏加载速率,要求为1.5s以内,在尝试将常用接口,全部缓存后,发现还是慢,最后通过打包分析工具,发现,拆包的文件,全部都集中到一个bundle.js文件,因此决定把一些较稳定的包,拆分出去。

一般常用的策略为 craco 或者 customize-cra 本文以customize-cra来举例子。 但是其实这个拆包,背后还是依赖于http 服务的并发处理,如果某个并发队列里某个服务耗时太多,那么就,必须拆分,避免单个资源加载速度过慢

针对于webpack 主要是利用code spliting

一般前端项目中 整体主要依赖于代码分割,来处理

  1. 借助一个实际业务项目来举例子

eg:

if (isProduction) {

  config.optimization.splitChunks = {

    chunks: 'all',

    cacheGroups: {

      style: {

        name: 'style',

        test: /(less|css)/,

        priority: 300,

        enforce: true,

      },

      'vendor-stable': {

        name: 'vendor-stable',

        test(module) {

          return module.resource && vendorStable.some((item) => module.resource.includes(item));

        },

        priority: 200,

        reuseExistingChunk: true,

      },

      'vendor-wind': {

        name: 'vendor-wind',

        test(module) {

          return (

            module.resource &&

            vendorWind.some((item) => module.resource.includes(item)) &&

            !vendorWindExclude.some((item) => module.resource.includes(item))

          );

        },

        priority: 180,

        reuseExistingChunk: true,

      },

      'vendor-chart': {

        name: 'vendor-chart',

        test(module) {

          return module.resource && vendorChart.some((item) => module.resource.includes(item));

        },

        priority: 160,

        reuseExistingChunk: true,

      },

      bundle: {

        name: 'bundle',

        test(module) {

          return module.resource && module.resource.includes('src');

        },

        priority: 50,

        enforce: true,

      },

    },

  };

}.js

具体例子 1.