webpack5 splitChunks 配置和用法
前言
CommonsChunkPlugin主要是用来提取第三方库和公共模块,避免首屏加载的bundle文件或者按需加载的bundle文件体积过大,从而导致加载时间过长,着实是优化的一把利器。
先来说一下各种教程以及文档中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
生成文件:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhibeghk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22