webpack之代码分割及页面缓存优化

概述

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

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

• require.ensure --commonjs

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

• import() --webpack

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

分割chunk包的配置说明

• cacheGroups会默认有两个分割配置
• 其它配置可以参考官方文档

// 默认配置
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项目中查看