webpack代码分片的实现

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

背景

实现高性能应用其中最重要的一点就是尽可能地让用户每次只加载必要的资源，优先级不要太高的资源则采用延迟加载等技术渐进式地获取，这样可以保证页面的首屏速度。代码分片是webpck打包工具所特有的一项技术，通过这项功能可以把代码按照特定的形式进行拆分，使用户不必一次全部加载，而是按需加载。

CommonsChunkPlugin

虽然这个插件在webpack4当中已经不推荐使用，但是我们还是要了解一下。这个插件可以将多个Chunk中的公共的部分提取出来。公共模块提取可以为几个项目带来几个收益：

开发过程中减少了重复模块打包，可以提升开发速度；
减小整体资源体积；
合理分片后的代码可以更有效的利用客户端缓存。

该插件的默认规则是只要一个模块被两个入口chunk所使用就会被提取出来，比如只要a和b用了react，react就会被提取出来。但是它仍有些不足之处：

一个CommonChunkPlugin只能提取一个vendor，假如我们想提取多个vendor，则需要配置多个插件，这回增加很多重复的配置代码。
前面我们提到的mainfest实际上使浏览器多加载一个资源，这对于页面渲染速度不是友好的。
由于内部设计上的一些缺陷，CommonChunkPlugin在提取公共模块的时候会破坏掉原有的chunk中模块的依赖关系，导致难以进行更多的优化。

splitChunks

这是webpack新增的一个功能，改进了CommonChunkPlugin而重新设计和实现的代码分片特性，不仅比CommonChunkPlugin功能更加强大，还更简单易用。代码如下

module.exports = {
    entry: './foo.js',
    output: {
        filename: 'foo.js',
        publicPath: '/dist/'
    },
    mode: 'development',
    optimization: {
        splitChunks: {
            chunks: 'all',
        }
    }
}

// foo.js
import React from 'react';
import('./bar.js');
document.write('foo.js', React.version);

// bar.js
import react from 'react';
console.log('bar.js', React.version);

splitChunk默认情形下的提取条件:

提取后的chunk可被共享或者来自node_modules目录。这一条很容易理解，被多次引用或处于node_modules中的模块更倾向于是通用模块，比较适合被提取出来。
提取后的js chunk会有相应的体积，比如大于30KB，Css Chunk体积假如大于50KB，这个也比较容易理解，如果提取后的资源体积太小，那么带来的优化效果也一般。
在按需加载的过程，并行请求的资源最大值小于等于5，按需加载指的是，通过动态插入script标签的方式加载脚本。我们一般不希望同时加载过多的资源，因为每一个请求都要花费建立链接和释放链接的成本，因此提取的规则只在并行请求不多的时候生效。
在首次加载时，并行请求的资源数最大值小于等于3，和上一条类似，只不过在页面首次加载时往往对性能要求更高，因此这里的默认阀值也更低。

配置

splitChunk：{
    chunks: 'async',
    minSize: {
        javascript: 30000,
        style: 50000,
    },
    maxSize: 0,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~'，
    name: true,
    cacheGroups:{
        vendor: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
        },
        default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

匹配模式
chunks的值有三个，async（默认）、initial、all。async只提取异步chunks，initial只对入口chunk生效，all两种模式同时开启（推荐使用）

匹配条件
minSize、minChunks、maxAsyncRequests、maxInitialRequests

命名
默认为true，它意味着可以根据不能cacheGroups和作用范围自动为新生成的chunk命名，并以automaticNameDelimiter分隔。

cacheGroup
可以理解为分离chunks时的规则，默认情况下两种规则：vendors和default。vendors
用于提取所有node_modules中符合条件的模块，default则作用于被多次引用的模块。可以对这些规则进行增加或者修改，如果要禁用某种规则，也可以直接将其设置为false。当一个模块同时符合多个cacheGroups时，则更具其中的priority配置项确定优先级。

异步加载资源

资源异步加载主要解决的问题是，当模块数量过多，资源体积过大时，可以把一些暂时使用不到的模块延迟加载。这样使页面初次渲染的时候用户下载的资源尽可能小，后续的模块等到需要的时候在再去触发加载，因此这种一般都叫做按需加载。
webpack中有两种异步加载的方式，import(webapck2开始)和require.ensure（webapck1），import和es6 module的区别就是，不需要顶层加载，即用即加载。因为只是简单的函数调用，这里不做其他阐述。