简单谈谈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工具 Event封装
Aug 21 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
Jquery获取radio选中的值
May 05 jQuery
BootStrap的两种模态框方式
May 10 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 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
图书管理程序(三)
2006/10/09 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
js几个验证函数代码
2010/03/25 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Django REST framework 分页的实现代码
2019/06/19 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
酒店应聘自荐信
2013/11/09 职场文书
小学班主任寄语大全
2014/04/04 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
2016年情人节广告语
2016/01/28 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript