webpack4基础 --- 代码分割

demo: 仓库地址https://github.com/weixiaoshiaishang/zfpx/tree/master/webpack

一、多页面代码提取

webpack4打包多页面应用过程中的提取公共代码部分。相比于webpack3，4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件

1、目录结构

2.optimization.splitChunks配置项

默认规则：

New chunk can be shared OR modules are from the node_modules folder

New chunk would be bigger than 30kb (before min+gz)

Maximum number of parallel requests when loading chunks on demand

would be lower or equal to 5

Maximum number of parallel requests at initial page load would be lower or equal to 3

• minSize(默认是30000)：形成一个新代码块最小的体积

• minChunks（默认是1）：在分割之前，这个代码块最小应该被引用的次数（译注：保证代码块复用性，默认配置的策略是不需要多次引用也可以被分割）

• maxInitialRequests（默认是3）：一个入口最大的并行请求数

• maxAsyncRequests（默认是5）：按需加载的代码块（vendor-chunk）并行请求的数量小于或等于5个

• chunks (默认是async) ：initial、async和all

• test： 用于控制哪些模块被这个缓存组匹配到。原封不动传递出去的话，它默认会选择所有的模块。可以传递的值类型：RegExp、String和Function

• name(打包的chunks的名字)：字符串或者函数(函数可以根据条件自定义名字)

• priority ：缓存组打包的先后优先级。

• cacheGroups配置项：

  代码块

  cacheGroups配置项：  复制代码

  [key]: {复制代码

      "priority": "缓存优先级权重",复制代码

      "name": "split 出来的 chunk 的名字",复制代码

      "chunks": "应该用范围",复制代码

      "enforce": "未知",复制代码

      "minSize": "最小尺寸",复制代码

      "minChunks": "最小chunks",复制代码

      "maxAsyncRequests": "",复制代码

      "maxInitialRequests": "",复制代码

      "filename": "最后output的文件名",复制代码

      "reuseExistingChunk": "未知"复制代码

  }复制代码

代码块

optimization:{复制代码

    splitChunks:{复制代码

        chunks:async,//表示显示块的范围，三个可选值：复制代码

        //initial(初始块)、async(按需加载块)、all(默认，全部块)复制代码

​复制代码

        minSize:0,//表示在分离前的最小模块大小，默认为0，最小为30000复制代码

​复制代码

        minChunks:1,//表示分离前被引用次数,默认为1复制代码

​复制代码

        maxAsyncRequests:1,//最大按需加载次数，最大异步加载次数，默认1复制代码

​复制代码

        maxInitialRequests:1,//最大初始化加载次数，一个入口文件可以并行加载的最大文件数量，默认1复制代码

​复制代码

        automaticNameDelimiter: '~',//打包分隔符，若改为'-'则分离后的js默认命名规则为[来源]-[入口key].js复制代码

​复制代码

        name: function(){},//打包后的名称，此选项可接受函数，默认true,,由chunk和hash值自动生成，复制代码

        //当存在匹配的缓存组时，命名使用缓存组中的name值，若不在则为[来源]~[入口key].js复制代码

​复制代码

        cacheGroups:{//设置缓存chunks复制代码

​复制代码

            priority: 0,//缓存组优先级复制代码

            //当需要优先匹配缓存组的规则时，priority需要设置为正数，当需要优先匹配默认设置时，缓存组需设置为负数，0为两者分割线复制代码

​复制代码

            default:{//设置缓存组默认配置，可通过default:false禁用默认缓存组，复制代码

            //然后就可以自定义缓存组，将初始化加载时被重复引用的模块进行拆分复制代码

                minChunks:2,//引用两次复制代码

                priority:-20,//缓存组优先级为-20复制代码

                reuseExistingChunk:true,//表示可以使用已经存在的块，即如果满足条件的块已经存在就是用己有的的，不再创建一个新的块复制代码

            }，复制代码

            [key]:{//自定义缓存组，可以根据需求，自由创建复制代码

                chunks:'initial',复制代码

                test: /vue/,//正则规则验证，如符合就提取chunk放入当前缓存组，值可以是function、boolean、string、RegExp，默认为空复制代码

                enforce: true//优先处理复制代码

            }复制代码

        } ,复制代码

        runtimeChunk: {复制代码

            name: 'manifest'复制代码

        }复制代码

    }复制代码

3、runtimeChunk用法

它的作用是将包含chunks 映射关系的 list单独从 app.js里提取出来，因为每一个 chunk 的 id 基本都是基于内容 hash 出来的，所以你每次改动都会影响它，如果不将它提取出来的话，等于app.js每次都会改变。缓存就失效了。

The runtimeChunk option is also specified to move webpack's runtime into the vendors chunk to avoid duplication of it in our app code.

4、动态引入

代码块

// 打包的别名复制代码

import(/* webpackChunkName: "common-async.js" */"./common-async").then(common => {复制代码

 console.log(common);复制代码

})复制代码

5、注意点

• cacheGroups 会继承和覆盖splitChunks的配置项，但是test、priorty和reuseExistingChunk只能用于配置缓存组。。

• cacheGroups 里的每一项最好都要加上chunks参数，不然可能打包不出来你想要的东西。

• minSize 默认是30KB（注意这个体积是压缩之前的）在小于30kb的情况下一定要设置一个值，否则也可能打包不出来你想要的东西，而且这东西要加在cacheGroups里面。

• priority 在某些情况下，还是挺有用的，可以设置打包chunks的优先级。

转载于:https://juejin.im/post/5c3954e5e51d45522851e8f9