webpack 打包chunk
chunk的含义以及出现的情况
webpack特定术语在内部用于管理捆绑过程,输出束(bundle)由块组成。
是webpack 根据功能拆分出来的代码片段,包含三种情况
官方:
1.入口起点:使用entry配置手动地分离代码
**2.防止重复:**使用entry dependencies或者SplitChunkPlugin去重和分离chunk
3.动态导入:通过模块地内联函数调用来分离代码
通俗一点:
1.项目的入口文件(配置中的entry)
2.根据splitChunks拆分出来的代码
3.import 动态引入的代码(异步引入)
1.chunks三个值:async、initial、all
默认配置:其中chunks有三个值:async、initial、all
optimization: {splitChunks: {chunks: 'async',minSize: 20000,minRemainingSize: 0,minChunks: 1,maxAsyncRequests: 30,maxInitialRequests: 30,enforceSizeThreshold: 50000,cacheGroups: {defaultVendors: {test: /[\\/]node_modules[\\/]/,priority: -10,reuseExistingChunk: true,},default: {minChunks: 2,priority: -20,reuseExistingChunk: true,},},},},
1.1 async
async 异步也就是动态导入拆分,缺省值(默认值)
入口文件:
index.js:里面有两种拆分类型:entry文件(自身)、import()动态导入文件print、
function getLazyComponent () {const myDiv = document.createElement('div')const btn=document.createElement('button')btn.innerHTML="Clike me and look console"btn.onclick=function(){import(/*webpackChunkName:"print"*/'./print').then(module=>{const print=module.defaultprint()})}myDiv.appendChild(btn)return myDiv
}
document.body.appendChild(getLazyComponent())
print.js:包含一种拆分文件:node_modules文件
import _ from "lodash";// node_modules
console.log('The print.js has loaded! See the network tab')export default function printMe(){console.log("I get called from print.js --")
}
其中webpack.config.js的部分配置
module.exports = {...entry: {index: {import: index,},},output: {filename: "[name].bundle.js",path: path.resolve(__dirname, "dist"),clean: true,},...
};
npm run build 之后拆分的文件夹
分析:
1.入口文件:index.js
2.异步加载文件:print.js
3.async 对应的print.js 中的 node_modules 文件 lodash
1.2 initial 初始化(入口)
同样执行打包操作:
分析:
1.入口文件 index.js
2.异步:print.js
因为对应的是 入口拆分 所以 没有拆分 lodash文件
改动:
print.js(去掉lodash的引入)
// import _ from "lodash";// node_modules
console.log('The print.js has loaded! See the network tab')export default function printMe(){console.log("I get called from print.js --")
}
index.js (添加lodash)
import _ from "lodash";// node_modules
function getLazyComponent () {const myDiv = document.createElement('div')const btn=document.createElement('button')btn.innerHTML="Clike me and look console"btn.onclick=function(){import(/*webpackChunkName:"print"*/'./print').then(module=>{const print=module.defaultprint()})}myDiv.appendChild(btn)return myDiv
}
document.body.appendChild(getLazyComponent())
打包后的文件:
1.入口文件 index.js
2.异步:print.js
3.入口文件的node_modules的index.js中的lodash文件
另一种情况:
print.js:
console.log('The print.js has loaded! See the network tab')export default function printMe(){console.log("I get called from print.js --")
}
index.js:
import print from "./print"
function getLazyComponent () {const myDiv = document.createElement('div')const btn=document.createElement('button')btn.innerHTML="Clike me and look console"btn.onclick=function(){print()}myDiv.appendChild(btn)return myDiv
}
document.body.appendChild(getLazyComponent())
1.3 all(两个都进行拆分)
打包后文件:
总结:
async:只从异步加载的模块里面进行拆分
initial:只从入口模块里面进行拆分
all:从以上两者模块里面进行拆分
扩展webpack调试命令:
https://webpack.docschina.org/contribute/debugging/按照文档指示
1.npm install --global node-nightly
2.node-nightly //完成安装
// 使用 node-nightly与--inspect标志一起在任何基于 webpack 的项目中开始构建
// 比如构建你的build 类似执行npm run buildnode-nightly --inspect ./node_modules/webpack/bin/webpack.js
// 执行参数:
node-nightly --inspect ./node_modules/webpack/bin/webpack.js --config ./webpack.config.js
3.调试
node-nightly --inspect-brk ./node_modules/webpack/bin/webpack.js --config ./webpack.config.js
// 或者
node --inspect --inspect-brk ./node_modules/webpack/bin/webpack.js --config ./webpack.config.js
4.打开chrome://inspect---remote target 下面的文件
Chunk值总结
splitChunks中chunk的值:
默认解析出:initial 文件、动态导入文件,存在即导出
1.async :针对动态导入的文件内容进行解析,并按照相关规则分割代码
2.initial: 针对入口文件的内容进行解析,按照规则分割代码
以上二者都包括引用 import 同步导入的文件内容的代码chunk
例如:
index.js文件
import print from "./print"
`````````````````````````````````````````````````
print.js文件
import lodash from 'lodash'chunks:'initial'
运行打包之后:--针对入口文件进行解析--
index.js.bundle.js、 lodash.bundle.js 文件两个文件chunks:‘async’
运行打包之后:---不会针对入口文件进行解析--
index.bundle.js
同样:
例如:
index.js文件
import(/*webpackChunkName:"print"*/'./print').then(module=>{const print=module.defaultprint()
})
`````````````````````````````````````````````````
print.js文件
import lodash from 'lodash'chunks:'initial'
运行打包之后:--针对入口文件进行解析,不会针对动态问价解析--
index.js.bundle.js、print.bundle.jschunks:‘async’
运行打包之后:---针对动态文件解析,不会针对入口文件进行解析--
index.bundle.js、print.bundle.js、lodash.bundle.js 三个文件
webpack 打包chunk相关推荐
- webpack打包缓存_【第835期】Webpack 的静态资源持久缓存
原标题:[第835期]Webpack 的静态资源持久缓存 前言 你现在还在休假吗?早读课节前以web pack漫谈结尾,今年就以web pack开始吧.今日早读文章由众成翻译@yanni4night带 ...
- webpack打包vue反编译_2020年你必须知道的webpack打包优化方法
本文字数:3534字 预计阅读时间:10分钟 随着我们的项目项目越做越大,引入的第三方库会越来越多,打包的依赖也越来越多,每次 build 的时间越来越长,打包出来的文件会越来越大.最糟糕的是单页面应 ...
- webpack打包器小结(1)
================================================ [1]intro to webpack 官网: webpack官网: http://webpack ...
- webpack打包生成的map文件_一站式搞明白webpack中的代码分割
上次分析到通过devtool的配置项来设置source map,在线上环境可以通过设置成cheap-module-source-map来生成单独的map文件,但是map文件在线上环境会不会每次都加载呢 ...
- “约见”面试官系列之常见面试题第四十四篇之webpack打包原理解析?(建议收藏)
webpack打包是如何运行的 也可以称为,webpack是如何实现模块化的 CommonJS是同步加载模块,一般用于node.因为node应用程序运行在服务器上,程序通过文件系统可以直接读取到各个模 ...
- Webpack打包构建太慢了?试试几个方法
Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...
- vue-cli+webpack打包配置
vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...
- npm 及 webpack打包工具
npm包管理工具 1,认识npm npm即node的包管理器 是Node.js默人的.以JavaScript编写的软件包管理系统 npm已经是前端工程师的标配 在npm上我们可以很方便的下载我们所需要 ...
- webpack打包路径更改_webpack打包教程
创建package.json文件 命令:npm init 安装webpack npm install --save-dev webpack npm install --save-dev webpack ...
最新文章
- 他让张一鸣登门请教,培养出戴文渊李沐陈天奇,创建了传说中的上海交大ACM班...
- 传统与敏捷开发的真正区别
- yii 使用 有赞sdk_有赞ABTest系统:数据驱动增长实践
- python技巧(2)--碾平列表和列表去重
- python动态规划详解_python----动态规划
- centos mysql 修改mysql用户密码
- 上海高考女生计算机专业,@2020高考:女生最多的15个专业,一辈子的好友就在这里...
- html2canvas 截屏 兼容手机端
- XML Schema --simpleType
- Linux 命令(99)—— dirname 命令
- Leading and Trailing LightOJ - 1282
- 2022最全毕设题目选题
- COCO数据集合解析
- Pandas创建透视表教程
- 基于MATLAB的无线信道性能仿真
- win10系统登录和服务器,win10系统如何登录服务器地址
- 元学习 迁移学习_元学习就是您所需要的
- 纪念下大二参加的全国大学生智能汽车竞赛
- java复习二十一天[多线程终]
- Apple ID,APP ID,Bundle ID,iOS Certificates,iOS Provisioning Profiles各自含义以及之间的关系
热门文章
- 音视频开发系列(16)技术解码 | SRT和RIST协议综述
- 安装ubuntu出现的EFI boot partition问题
- 香港十大现货白银交易软件排名(最新版)
- ewomail 本地发送邮件接收不到_CentOS下搭建EwoMail邮件服务器的几个小诀窍
- SD卡镜像备份与烧录
- R16 android4.4 常见问题参考手册
- 2020Android-高级面试题总结(附答案解析),kotlin语法印章类
- MATLAB动画:风景上跳动的诗行
- 关于举办第二届中国工业互联网大赛的通知——500万奖金池
- Whale帷幄 - 智慧新零售技术营销解决方案 商超门店全场景数字化