javascript|webpack5 splitChunks 配置和用法前端|webpack

前言 CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，着实是优化的一把利器。
【javascript|webpack5 splitChunks 配置和用法】先来说一下各种教程以及文档中CommonsChunkPlugin提及到chunk有哪几种，主要有以下三种：
1.webpack当中配置的入口文件（entry）是chunk，可以理解为entry chunk
2.入口文件以及它的依赖文件通过code split（代码分割）出来的也是chunk，可以理解为children chunk
3.通过CommonsChunkPlugin创建出来的文件也是chunk，可以理解为commons chunk
splitChunks优点

它不会打包不需要的模块
对异步模块有效（默认情况下是打开的）
更加容易使用和更加自动化

实践 src目录下文件，如下：

common.js export const common = '公共文件'; first.js import {common} from './common'; import $ from 'jquery'; console.log($，`第一个文件，引入公共文件：${common}`); second.js import {common} from './common'; import $ from 'jquery'; console.log($，`second ${common}`

webpack.config.js：

const path = require("path"); const webpack = require("webpack"); const config = {entry: {first: './src/first.js',second: './src/second.js'},output: {path: path.resolve(__dirname,'./dist'),filename: '[name].js',clean: true}, }module.exports = config;

运行 webpack

asset first.js 324 KiB [emitted] (name: first) asset second.js 324 KiB [emitted] [compared for emit] (name: second) runtime modules 1.95 KiB 8 modules cacheable modules 282 KiB./src/first.js 125 bytes [built] [code generated]./src/second.js 91 bytes [built] [code generated]./src/common.js 37 bytes [built] [code generated]./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated] webpack 5.73.0 compiled successfully in 371 ms

dist文件下生成两个文件first.js, second.js first.js看下：

文章图片
分离出第三方库，自定义的公共模块，webpack运行文件

const path = require("path"); const webpack = require("webpack"); const config = {entry: {first: './src/first.js',second: './src/second.js'},output: {path: path.resolve(__dirname,'./dist'),filename: '[name].js',clean: true},optimization:{splitChunks: { // 选择哪些 chunk 进行优化，可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all,chunks: 'all',},} } module.exports = config;

查看运行情况：

asset vendors-node_modules_jquery_dist_jquery_js.js 320 KiB [emitted] (id hint: vendors) asset first.js 8.94 KiB [emitted] (name: first) asset second.js 8.92 KiB [emitted] (name: second) Entrypoint first 329 KiB = vendors-node_modules_jquery_dist_jquery_js.js 320 KiB first.js 8.94 KiB Entrypoint second 329 KiB = vendors-node_modules_jquery_dist_jquery_js.js 320 KiB second.js 8.92 KiB runtime modules 7 KiB 12 modules cacheable modules 282 KiB./src/first.js 125 bytes [built] [code generated]./src/second.js 91 bytes [built] [code generated]./src/common.js 37 bytes [built] [code generated]./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated] webpack 5.73.0 compiled successfully in 371 ms

查看dist目录下，新增了一个vendor*.js的文件，把jquery 单独提取出来了

文章图片

最终代码：

const path = require("path"); const webpack = require("webpack"); const config = {entry: {first: './src/first.js',second: './src/second.js'},output: {path: path.resolve(__dirname,'./dist'),filename: '[name].js',clean: true},optimization:{runtimeChunk: {name: 'runtime'},splitChunks: {cacheGroups: {commons: {name: 'commons', // 设置模块名称，如果不设置就是commons_node_modules_jquery_jquery_src_common_js.jschunks: 'all',minChunks: 2,},},},} } module.exports = config;

运行结果：

asset commons.js 322 KiB [emitted] (name: commons) (id hint: commons) asset runtime.js 7.15 KiB [compared for emit] (name: runtime) asset second.js 1.02 KiB [emitted] (name: second) asset first.js 1.01 KiB [emitted] (name: first) Entrypoint first 330 KiB = runtime.js 7.15 KiB commons.js 322 KiB first.js 1.01 KiB Entrypoint second 330 KiB = runtime.js 7.15 KiB commons.js 322 KiB second.js 1.02 KiB runtime modules 3.5 KiB 6 modules cacheable modules 282 KiB./src/first.js 125 bytes [built] [code generated]./src/second.js 91 bytes [built] [code generated]./src/common.js 37 bytes [built] [code generated]./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated] webpack 5.73.0 compiled successfully in 350 ms

生成文件：