简单谈谈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 相关文章推荐
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jQuery选择器全面总结
Jan 06 Javascript
javascript常用代码段搜集
Dec 04 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
js实现文字滚动效果
Mar 03 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 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 select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
vuejs指令详解
2017/02/07 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
Python中暂存上传图片的方法
2015/02/18 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Python编写Windows Service服务程序
2018/01/04 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python抓取文件夹的所有文件
2018/02/27 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
python监控nginx端口和进程状态
2019/09/06 Python
Python中itertools的用法详解
2020/02/07 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
大学生毕业自荐信
2013/10/10 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
工程师岗位职责规定
2014/02/26 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
导游词之太原天龙山
2020/01/02 职场文书