CommonsChunkPlugin
CommonsChunk
插件的作用就是提取代码中的公共代码,然后将公共模块打包到一个独立的文件中,以便在其它的入口和模块中使用,原理就是把多个入口共同的依赖都给定义成一个新入口
多种打包情况:
单一入口,模块单一引用
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry:
{
main:'./main.js',
},
output: {
path:__dirname+'/dist',
filename: 'build.js'
},
plugins: [ ]
};
jquery
模块被一起打包到 build.js
单一入口,模块重复引用
相同的模块重复引用,webpack
只打包一份 webpack
打包的原理为,在入口文件中,对每个 require
资源文件进行配置一个 id
,也就是说,对于同一个资源,就算是 require
多次,它的 id
也是一样的,所以无论在多少个文件中 require
,它都只会打包一份 即内部的 __webpack_require__
函数传入统一 id
时,不会导入新的模块,直接返回
我的理解是,只有在多入口,模块重复引用时,使用 CommonsChunkPlugin
才能提取出重复打包的模块。当然,也可以在单入口时,提取出某些框架的代码,减少请求次数
单一入口,提取框架模块
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry:
{
main:'./main.js',
vendor: ["react", "react-dom", '其他模块'],//插件中 name,filename 以这个key为值
},
output: {
path:__dirname+'/dist',
filename: '[name].js'//不使用[name],并且插件中没有filename,
},
plugins: [
new CommonsChunkPlugin({
name: 'vendor'
// filename:"vendor.js"//忽略则以name为输出文件的名字,否则以此为输出文件名字
})
]
};
打包出不变的框架模块,可以缓存在客户端,服务端更新后客户端只需要获取新的 main.js
多入口,模块重复引用,分文件输出
多入口就是分别执行的单入口,彼此之间互不影响,而该插件的原理就是把多个入口共同的依赖都给定义成一个新入口
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
main: './main.js',
main1: './main1.js',
common1: ['jquery'],
common2: ['vue']
},
output: {
path: __dirname + '/dist',
filename: '[name].js'//不使用[name],并且插件中没有filename,
//这输出文件中只用chunk.js的内容,main.js的内容不知跑哪里去了
},
plugins: [
new CommonsChunkPlugin({
name: ["chunk","common1","common2"],//浏览器页面上使用的时候 common2 必须最先加载
// filename:"chunk.js"//忽略则以name为输出文件的名字,
//否则以此为输出文件名字
minChunks: 2 //默认值
})
]
};
jquery
被打包到 common1.js
,vue
被打包到 common2.js
,chunk.js
打包的是公共的业务模块(webpack用插件CommonsChunkPlugin进行打包的时候,将符合引用次数(minChunks)的模块打包到 name
参数的数组的第一个块里(chunk
),然后数组后面的块依次打包(查找 entry
里的 key,没有找到相关的 key 就生成一个空的块),最后一个块包含 webpack
生成的在浏览器上使用各个块的加载代码,所以页面上使用的时候最后一个块必须最先加载)
CommonsChunkPlugin的更多相关文章
- webpack CommonsChunkPlugin详细教程
1.demo结构: 2.package.json配置: { "name": "webpack-simple-demo", "version" ...
- 关于webpack.optimize.CommonsChunkPlugin的使用二
Note:当有多个入口节点的时候,只有所有入口节点都引入了同一个模块的时候,webpack.optimize.CommonsChunkPlugin才会将那个模块提取出来,如果其中一个入口节点没有引入该 ...
- webpack.optimize.CommonsChunkPlugin插件的使用
方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...
- CommonsChunkPlugin的使用(关于angular2中的polyfills和vendor的疑问解决)
seed: angular2-webpack-starter(在github上可以找到) polyfills:提供api以方便兼容不同的浏览器 vendor:项目插件扩展 在学习ng2中一直不明白为什 ...
- CommonsChunkPlugin的一些总结
CommonsChunkPlugin 官方文档地址 https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin new ...
- [Webpack 2] Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin
If you have a multi-page application (as opposed to a single page app), you’re likely sharing module ...
- [Webpack 2] Grouping vendor files with the Webpack CommonsChunkPlugin
Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsCh ...
- Can someone explain Webpack's CommonsChunkPlugin
I get the general gist that the CommonsChunkPlugin looks at all the entry points, checks to see if t ...
- CommonsChunkPlugin并不是分离第三方库的好办法(DllPlugin科学利用浏览器缓存)
webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启 ...
- 谈谈CommonsChunkPlugin抽取公共模块
引言 webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介绍,不太了解可以参考webpack官网介绍: 该插件是we ...
随机推荐
- springboot自定义配置信息读取
在properties配置文件加入自定义配置例如: zxgl.detail.url=http://*****/zxgl-web/news/viewNewsIndexDetail.do?id= #资讯t ...
- opencv基础教程 之 图像基础和绘图
1,教程:感谢小强 2,用argparse传参数来显示一张图片 #!/usr/bin/python #linux系统 #coding=utf-8 import cv2 import argparse ...
- 吴恩达《机器学习》课程笔记——第六章:Matlab/Octave教程
上一篇 ※※※※※※※※ [回到目录] ※※※※※※※※ 下一篇 这一章的内容比较简单,主要是MATLAB的一些基础教程,如果之前没有学过matlab建议直接找一本相关书籍,边做边学,matl ...
- Revit二次钢筋
- story 泄露服务器libc版本
记录下学到的姿势,利用信息泄露得到服务器libc 至少两个函数偏移,利用libc-databse得到服务器libc版本 传送门 泄露脚本如下 from pwn import * context.log ...
- 帆软认证BI工程师FCBA-部分题目
1.安装32位系统的FineBI,最多只能支持2G内存. 正确 错误 2.Spider数据引擎中适合内存化的表通常为数据量小且更新频率较低的表. 正确 错误 3.Spider数据引擎支持跨数据源进行数 ...
- C++ opentracing zipkin
Useful page : https://github.com/openzipkin/b3-propagation & other official websites Steps to ru ...
- 怎么给PDF去除页眉页脚
PDF文件我们现在都会使用到,但有时需编辑PDF文件的时候,小伙伴们都知道该怎么操作吗,不知道的小伙伴不用担心,今天小编就来跟大家分享一下怎么删除PDF文件的页眉页脚,我们一起来看看下面的文章吧 操作 ...
- python的学习之路(一)
1.python的简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...
- python常见排序算法解析
python——常见排序算法解析 算法是程序员的灵魂. 下面的博文是我整理的感觉还不错的算法实现 原理的理解是最重要的,我会常回来看看,并坚持每天刷leetcode 本篇主要实现九(八)大排序算法 ...