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 ...
最新文章
- 网格的铺设问题——骨牌
- 全差分运算放大器ADA4940的分析
- redis集合数据过期_关于redis性能问题分析和优化
- 六步创建TCP服务端
- linux6.5双屏显示,Redhat 6.5的系统如何设置双显示屏,急急急!
- ActionScript 3.0基础之事件机制
- 第六届蓝桥杯java b组第一题
- paip. java的 函数式编程 大法
- vue项目实现富文本编辑器(实践用过)
- python代码加密
- NLP分词使用总结--python HANLP
- Material Design系列之BottomSheet详解
- 注册表操作C/C++(实战实现程序自启动)
- 外国人申请居留许可服务指南(中英文)
- Pytorch每日一练——预测泰坦尼克号船上的生存乘客
- mybatis collection 关联查询多个参数
- android 开发英语单词统计
- Java实现内网穿透
- 如何配置NATAPP
- 安装McAfee EPO 5.10.0