简单谈谈CommonsChunkPlugin抽取公共模块
作者:wonyun 发布时间:2024-04-19 10:14:27
引言
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打包编译后的结果如下:
我们对其中的业务代码app.js进行修改后,重新编译结果如下:
可以发现,在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来说这种方式的收益更大。如下图:
修改app代码后的打包编译结果如下,可以看到vendor的chunkhash没有变化
在webpack中配置CommonsChunkPlugin时需要注意一点:
配置webpack的output项时,其filename和chunkFilename必须使用chunkhash。不要使用hash,否则即使按照上面的配置也不能达到预期的效果。至于hash与chunkhash的区别,可参考github的回答
来源:https://www.cnblogs.com/wonyun/p/8146139.html
猜你喜欢
- 最近做了一个项目,将从微信下载的音频文件(默认为.amr格式)转化为mp3格式(否则前端播放将会遇到困难)上传到云端。经过一番研究,最终决定
- 一般来说在 Python 中,为了解决内存泄漏问题,采用了对象引用计数,并基于引用计数实现自动垃圾回收。由于Python 有了自动垃圾回收功
- Python语言简洁明了,可以用较少的代码实现同样的功能。这其中Python的四个内置数据类型功不可没,他们即是list, tuple, d
- 1、数据驱动介绍:@ddt.ddt(类装饰器,申明当前类使用ddt框架)@ddt.data(函数装饰器,用于给测试用例传递数据),支持传py
- js代码: <script> window.onload = function(){ <PRE class=javascr
- 外联接。外联接可以是左向外联接、右向外联接或完整外部联接。 在 FROM 子句中指定外联接时,可以由下列几组关键字中的一组指定:LEFT J
- 枚举类Enum枚举类,在企业开发中用的比较多当我们需要定义常量时,一个办法是用大写的变量通过整数来定义,例如月份:# 当项目中需要使用12个
- 1. 图信号处理知识图卷积神经网络涉及到图信号处理的相关知识,也是由图信号处理领域的知识推导发展而来,了解图信号处理的知识是理解图卷积神经网
- 每次遇到pandas的dataframe某列日期格式问题总会哉坑,下面记录一下常用时间日期函数....1、字符串转化为日期 str—>
- 前言上一篇暴力破解文章:一个简单的Python暴力破解网站登录密码脚本测试靶机为Pikachu漏洞练习平台暴力破解模块下的 &ldq
- ALTER TABLE允许你修改一个现有表的结构。例如,你可以增加或删除列、创造或消去索引、改变现有列的类型、或重新命名列或表本身。你也能改
- 1.安装插件步骤2.点击OK确认之后,提示IDE需要重启,选择重启:3.设置leetcode插件,用户名、密码:4.点击右下角的leetco
- 著名的老掉牙的IE6.0在我这里已经有六年工龄了,前几天朋友拿到个IE8.0新的Beta版本,我的Sever2003装不上,大为扫兴。Chr
- 在ie7发布之前,Dean的addEvent/removeEvent可以称的上是完美了。IE7发布后,引入新的内存泄漏(这个我不是很确定,忘
- 表结构很简单CREATE TABLE `oplogs` (`id` int(10) unsigned NOT NULL AUTO_INCRE
- 1。如果客户端和服务器端的连接需要跨越并通过不可信任的网络,那么就需要使用SSH隧道来加密该连接的通信。 2。用set password语句
- 本篇文章记录一下函数的等高线及其三维图像的可视化方法。本例绘制的函数为:1. 网格点  在绘制曲线之前,
- 计算矩阵标准差>>> a = np.array([[1, 2], [3, 4]])>>> np.std(
- 判断一个数是否能被另一个整数整除是一个挺简单的问题,一般一个模运算就可以搞定了,懒惰的晓萌还是不想自己做,于是找到你帮他写代码,你就帮帮他吧
- 本文示例可见一斑了,主要是通过Java对SQL语句进行操作,和普通的增删改查的原理是一样的:import java.sql.*; publi