webpack中怎么实现代码分片

webpack中怎么实现代码分片，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

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的区别就是，不需要顶层加载，即用即加载。因为只是简单的函数调用，这里不做其他阐述。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。