浅谈webpack SplitChunksPlugin实用指南

提到前端打包工具，毫无疑问想先到的是webpack。但是前端发展地很快，时不时会有新东西出现，打包工具这边之前也出现parcel和rollup。各种工具的碰撞，相互汲取优点，促进技术的发展。

webpack4中支持了零配置的特性，同时对块打包也做了优化，

CommonsChunkPlugin

optimization.splitChunks

下面就开始介绍splitChunks的内容。

默认情况

首先webpack会根据下述条件自动进行代码块分割：

新代码块可以被共享引用，或者这些模块都是来自node_modules文件夹里面
新代码块大于30kb（min+gziped之前的体积）
按需加载的代码块，并行请求最大数量应该小于或者等于5
初始加载的代码块，并行请求最大数量应该小于或等于3

块打包默认情况下只会影响按需加载模块，因为对初始块也进行优化打包会影响HTML中的script标签数，增加请求数。

接下来看些例子来理解默认情况的打包。

模块全部是同步引入

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
console.log(_.join(['a', 'b'], '~'))
ReactDOM.render(
 <div>SplitChunk</div>,
 document.getElementById('root')
)

默认情况只会影响按需加载模块，所以所有内容全部被打包到一起了。

有模块动态导入

这里首先使用符合ECMAScript 提案 的 import() 语法

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import(/* webpackChunkName: "async-jquery" */ 'jquery').then(component => {
 console.log(component)
})
console.log(_.join(['a', 'b'], '~'))
ReactDOM.render(
 <div>SplitChunk</div>,
 document.getElementById('root')
)

这里jquery使用动态导入，打包结果中可以看到jquery被单独打包了

react按需加载

同样的我们试要react按需加载，使用react-router提供的按需加载方案

AsyncModule模块按上面方案异步加载Dashboard

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter, Route} from 'react-router-dom'
import AsyncModule from './AsyncModule.jsx'
import _ from 'lodash'
import $ from 'jquery'
console.log(_.join(['a', 'b'], '~'))
ReactDOM.render(
 <div>								 
 1/4    1 2 3 4 下一页 尾页