webpack4.0各个击破（4）—— Javascript & splitChunk

webpack

webpack

webpack4.0版本

webpack4.0

splitChunks

一. Js模块化开发

javascript

js

http

js

js

二. Js文件的一般打包需求

TS

ES6

三. 使用webpack处理js文件

3.1 使用babel转换ES6+语法

babel

ES6

babel

babel

webpack

webpack.config.js

...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
}
]
}
]
},
...

.babelrc

{
"presets":[
["env",{
"targets":{
"browsers":"last 2 versions"
}
}
]],
"plugins": [
"babel-plugin-transform-runtime"
]
}

3.2 脚本合并

webpack

webpack

webpack

webpack

webpack

CommonJs

webpack

ES harmony

3.3 公共模块识别

webpack

/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }

__webpack_require__( )

webpack

installedModules

bundle.js

3.4 代码分割

contentHash

contentHash

max-age

Echarts

Echarts

main.bundle.js

Echarts

Echarts

Echarts

CDN

code splitting

code-splitting

3.5 代码混淆压缩

webpack4

UglifyJs

mode

production

babel

四. 细说splitChunks技术

4.1 参数说明

webpack4

CommonsChunkPlugin

optimization.splitChunks

optimization.runtimeChunk

runtimeChunk

runtimeChunk

vendors

splitChunks

node_modules

minChunks

4.2 参数配置

splitChunks

webpack

module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'async',//默认只作用于异步模块，为`all`时对所有模块生效,`initial`对同步模块有效
minSize: 30000,//合并前模块文件的体积
minChunks: 1,//最少被引用次数
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',//自动命名连接符
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
minChunks:1,//敲黑板
priority: -10//优先级更高
},
default: {
test: /[\\/]src[\\/]js[\\/]/
minChunks: 2,//一般为非第三方公共模块
priority: -20,
reuseExistingChunk: true
}
},
runtimeChunk:{
name:'manifest'
}
}
}

4.3 代码分割实例

splitChunks

node_modules

vendors-main.[hash].js

entryA.js: vue vuex component10k
entryB.js: vue axios component10k
entryC.js: vue vuex axios component10k

splitChunks

html-webpack-plugin

chunks:'async'

<script>

html

chunks

all

initial

html-webpack-plugin

excludeChunks

html-webpack-plugin

html-webpack-plugin

chunks

Bundle Buddy

webpack-bundle-analyser

五. 参考及附件说明

webpack.spa.config.js

main.js

webpack.multi.config.js

entryA.js

entryB.js

entryC.js