概述

使用webpack进行打包时，会生成默认的入口文件chunk、chunk-common、default包。这些chunk包会随着项目的不断增大而增大， 有时我们只修改一行代码就需要重新构建所有包，并且页面也无法做到按需加载(chunk包)，首页就需要加载到所有(chunk包)。
我们可以通过配置optimization(优化模块)中的splitChunks(分割chunk模块)进行优化，将需要按需加载的模块进行单独打包。

文件中按需引入模块的几种方法

  • require.ensure –commonjs

    1
    require.ensure([], () => r(require('../img/react.png')), 'yourChunkName');

  • import() –webpack

    1
    import(/* webpackChunkName: "yourChunkName" */ '../img/vue.jpg');

分割chunk包的配置说明

  • cacheGroups会默认有两个分割配置
  • 其它配置可以参考官方文档
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // 默认配置
    module.exports = {
       optimization: {
          splitChunks: {
                cacheGroups: {
                    vendors: {
                        name: 'chunk-vendors',
                        test: /[\\/]node_modules[\\/]/,
                        priority: -10,
                        chunks: 'initial'
                    },
                    common: {
                        name: 'chunk-common',
                        minChunks: 2,
                        priority: -20,
                        chunks: 'initial',
                        reuseExistingChunk: true
                    }
                }
            }
       }
    }

打包时涉及到的变量说明

  • chunkId: 打包时用于区分不同chunk的标记 默认为 自增
  • chunkName: 各个chunk配置的名称
  • hash: 打包时生成的hash 每次打包 都会变化 用以区分每次打包
  • contenthash: 根据打包生成的文件内容生成hash 内容不变 contenthash就不会变
  • chunkhash: 不同入口的hash值 用于区分入口 但是同一入口任何文件变化 就会重新生成

chunk打包缓存优化

如果我们修改部分代码，只重新生成对应的chunk包，这样页面加载chunk时就可以直接使用缓存了。实现需要修改以下几个部分：

  • 修改chunkName的命名方式为 ‘js/[name].[contenthash:8].js’， 让hash值随chunk内容变化
  • 设置runtimeChunk为true, 分离出入口chunk包的加载和解析逻辑，提取出自运行函数中的模块调用逻辑
  • 使用插件 MiniCssExtractPlugin 分割css chunk块
  • 使用插件 NamedChunksPlugin 修改chunkId为chunkName 来进行chunk进行打包标记（否则新增或删除某个模块时，所有模块的id都会变化）
  • …

备注

  • 具体代码就不展示了
  • 至于优化详细步骤，在网上都可以搜到或者在我的git项目中查看