简单谈谈CommonsChunkPlugin抽取公共模块


Posted in Javascript onDecember 31, 2017

引言

webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介绍,不太了解可以参考webpack官网介绍;

该插件是webpack项目常用的一个优化功能,几乎在每个webpack项目中都会用到。使用该插件带来的好处:

提升webpack打包速度和项目体积:将webpack入口的chunk文件中所有公共的代码提取出来,减少代码体积;同时提升webpack打包速度。

利用缓存机制:依赖的公共模块文件一般很少更改或者不会更改,这样独立模块文件提取出可以长期缓存。

但是在项目中,若插件打开方式不正确的话,上面的第二点其实是无法实现,因为这种情况下:

没有被修改过的公有代码或库代码打包出的Entry Chunk,会随着其他业务代码的变化而变化,导致页面上的长缓存机制失效。

那么,下面就来开启CommonsChunkPlugin正确的打开方式。

CommonsChunkPlugin不正确用法

假如将我们项目的公共库如react、react-dom、react-router与业务代码隔离,将其提取为vendor chunk,webpack配置如下:

const webpack = require("webpack");
const path = require('path');
module.exports = {
 entry: {
 app: "./app.js",
 vendor: ["react","react-dom", "redux", "react-redux", "react-router-redux"]
 },
 output: {
 path: path.resolve(__dirname, 'output'),
 filename: "[name].[chunkhash].js"
 },
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]})
 ]
};

上面将项目一些基础库打包成一个名为vendor的chunk中,并将业务相关的代码打包到一个名为app的chunk中;

webpack打包编译后的结果如下:

简单谈谈CommonsChunkPlugin抽取公共模块

我们对其中的业务代码app.js进行修改后,重新编译结果如下:

简单谈谈CommonsChunkPlugin抽取公共模块

可以发现,在CommonsChunkPlugin这种配置下,当业务代码app发生变化,而库代码也跟着变化,vender的chunkhash也跟着变化,这样vendor的引用的名称跟着变化,导致浏览器端的长缓存机制失效。

引起问题的原因

引起webpack每次打包编译时vendor跟着变化的原因:

webpack每次build的时候都会生成一些运行时代码。当只有一个文件时,运行时代码直接塞到这个文件中。当有多个文件时,运行时代码会被提取到公共文件中,也就是上面CommonsChunkPlugin配置的vendor chunk中。

webpack每次编译时产生的运行时代码,包括全局webpackJsonp方法的定义和维护模块依赖关系,具体可以参考这里的commons.js。

所以,上面webpack的CommonsChunkPlugin配置中,每次编译时这些代码都会打包到vendor中,导致每次vendor的chunkhash每次都会变化。

那么,我们可以在对vendor chunk进行配置,抽取其中的公共代码,即webpack运行时代码,这样就可以将项目依赖的基础库模块与业务模块隔离开来,因为不会对这些文件进行修改,所以这些文件可达到长缓存的作用。具体配置如下:

module.exports = {
 entry: {
 app: "./app.js",
 vendor: ["react","react-dom", "redux", "react-redux", "react-router-redux"]
 },
 ....
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]}),
 new webpack.optimize.CommonsChunkPlugin({
 name: 'manifest',
 chunks: ['vendor']
 })
 ]
};

这样,即使修改业务app代码,项目依赖的基础库vendor chunk也不会发生变化;只是抽取的manifest chunk每次还会变化,但是这个文件体积非常小,相比vendor来说这种方式的收益更大。如下图:

简单谈谈CommonsChunkPlugin抽取公共模块

修改app代码后的打包编译结果如下,可以看到vendor的chunkhash没有变化

简单谈谈CommonsChunkPlugin抽取公共模块

在webpack中配置CommonsChunkPlugin时需要注意一点:

配置webpack的output项时,其filename和chunkFilename必须使用chunkhash。不要使用hash,否则即使按照上面的配置也不能达到预期的效果。至于hash与chunkhash的区别,可参考github的回答

以上这篇简单谈谈CommonsChunkPlugin抽取公共模块就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
各种常用的JS函数整理
Oct 25 Javascript
js转义字符介绍
Nov 05 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 #Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 #jQuery
React数据传递之组件内部通信的方法
Dec 31 #Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 #Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 #Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 #Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 #Javascript
You might like
PHP print类函数使用总结
2010/06/25 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python 变量的创建过程详解
2019/09/02 Python
python动态视频下载器的实现方法
2019/09/16 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
倡导文明标语
2014/06/16 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers