webpack4.splitChunks

webpack中的三个概念module、chunk和bundle

在研究splitChunks之前,我们必须先弄明白这三个名词是什么意思,主要是chunk的含义,要不然你就不知道splitChunks是在什么的基础上进行拆分。

  从官网上貌似没找太多的解释,去网上搜了搜基本上都在转述这位老哥的回答《what are module,chunk and bundle in webpack》,我根据自己的理解给出我个人的看法:

  • module:就是js的模块化webpack支持commonJS、ES6等模块化规范,简单来说就是你通过import语句引入的代码。
  • chunk: chunk是webpack根据功能拆分出来的,包含三种情况:

    1、你的项目入口(entry)

    2、通过import()动态引入的代码

    3、通过splitChunks拆分出来的代码

    chunk包含着module,可能是一对多也可能是一对一。

  • bundle:bundle是webpack打包之后的各个文件,一般就是和chunk是一对一的关系,bundle就是对chunk进行编译压缩打包等处理之后的产出。

splitChunks

  下面进入正题讲解splitChunks,splitChunks就算你什么配置都不做它也是生效的,源于webpack有一个默认配置,这也符合webpack4的开箱即用的特性,它的默认配置如下:

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

chunks:"initial" 表示只从入口模块进行拆分,我认为就是entry的配置

              "async"异步,相当于import异步拆分打包的内容

              "all": 所有

priority: 优先级,数值越大,越先执行

minChunks: 引用次数大于这个值进行打包

打包优化思路,

  a.先把大的库单独打包,如代码编辑器ace,图标可视化echarts,这边我通过test设置为函数,把一些编辑器相关的也一同打包

  b.把一些不怎么会改,升级的基础库进行打包,libs配置

  c.把一些公共代码进行打包。async的配置。需要注意minChunks: 2,这个配置就是上面打包完成剩下的文件中,如果有超过2个地方引用的就会打包进async.js,这个配置minChunks到底填几就看实际场景了

      d.vendors和default是默认配置,下面就是相关的配置,vendors是把node_modules打包一起,default是把重复代码打包,自己配置很详细的情况下,就应该禁用掉

optimization.splitChunks({
                chunks: async,
                cacheGroups: {
                     libs: {
                         name: chunk-libs,
                         test: /[\\/]node_modules[\\/]/,
                         priority: 10,
                        chunks: initial // only package third parties that are initially dependent
                     },
                    echarts: {
                        name: chunk-echarts, // split echarts into a single package
                        priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                        test: /[\\/]node_modules[\\/]_?echarts(.*)/ // in order to adapt to cnpm
                    },
}

 

 

建议安装:  webpack-bundle-analyzer

1、引入

const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin

2、使用

 
webpackConfig.plugins.push(new BundleAnalyzerPlugin({
...
}))

1、每次构建时自动打开

构建完成之后,浏览器会自动打开localhost:8888,不用改动package.json

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
    analyzerMode: ‘server‘,
    generateStatsFile: true,
    statsOptions: { source: false }
}))

配置参数记得补上,不然构建完不会自动打开~

2、运行特定命令才打开

(1)把analyzerMode设置为disabled

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
    analyzerMode: ‘disabled‘,
    generateStatsFile: true,
    statsOptions: { source: false }
}))

(2)在package.json的scripts字段中加入

"bundle-report": "webpack-bundle-analyzer --port 8123 dist/stats.json"

其中stat.json文件的位置在打包后的文件夹中,通常是dist,具体情况根据实际情况来定。

(3)命令行中键入命令
npm run bundle-report

 

 

参考:https://www.cnblogs.com/kwzm/p/10314438.html

webpack4.splitChunks

上一篇:html5-canvas


下一篇:html5