简单谈谈CommonsChunkPlugin抽取公共模块
引言
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的回答
以上这篇简单谈谈CommonsChunkPlugin抽取公共模块就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- Codeforces Round #416 (Div. 2)(A,思维题,暴力,B,思维题,暴力)
- 作为程序员的你在外行人眼里是一个怎样的群体?
- 高斯消元法(Gauss Elimination)【超详解&模板】
- [快学Python3]读写Excel - openpyxl库
- HDU 2147 kiki's game(规律,博弈)
- HDU 1847 Good Luck in CET-4 Everybody!(规律,博弈)
- [network][udp]你不要偷偷发包,我跟你讲
- [快学Python3]HTTP处理 - urllib模块
- 关小刷刷题08 – Leetcode 26. Remove Duplicates from Sorted Array 方法2、3
- C++课程设计类作业2
- C++课程设计类作业4
- [接口测试 - 基础篇] 01 你应该了解的协议基础
- 代码分享系列(1)之感知机【代码可下载】
- C++课程设计类作业3
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- laravel 解决多库下的DB::transaction()事务失效问题
- laravel 实现上传图片到本地和前台访问示例
- laravel框架模型中非静态方法也能静态调用的原理分析
- Laravel 5.2 文档 数据库 —— 起步介绍
- laravel csrf排除路由,禁止,关闭指定路由的例子
- thinkphp框架类库扩展操作示例
- Laravel ORM 数据model操作教程
- Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
- laravel 解决Eloquent ORM的save方法无法插入数据的问题
- laravel框架中控制器的创建和使用方法分析
- php 使用expat方式解析xml文件操作示例
- laravel利用中间件做防非法登录和权限控制示例
- laravel框架中表单请求类型和CSRF防护实例分析
- Yii框架getter与setter方法功能与用法分析
- laravel框架中视图的基本使用方法分析