Webpack 4教程 - 第四部分,使用SplitChunksPlugin分离代码
2019独角兽企业重金招聘Python工程师标准>>>
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处:https://wanago.io/2018/06/04/code-splitting-with-splitchunksplugin-in-webpack-4/
Webpack 4 给我们带来了一些变化。其中包括更快地打包,引入了SplitChunksPlugin,并淘汰掉之前的CommomsChunksPlugin。在本文,你将学习如何拆分输出代码以提高应用的性能。
代码分离的思想
先说重要的:在Webpack中,到底什么是代码分离?代码分离允许你把代码拆分到多个文件中。如果使用得当,你的应用性能会提高很多。因为浏览器能缓存你的代码。
每当你做出一次修改,包含修改的文件需要被所有访问你网站的人重新下载。但你并不会经常修改应用的依赖库(译者注:你常修改的是你的业务逻辑)。如果你能把那些依赖库拆分到完全分离的文件中,即使业务逻辑发生了更改,访问者也不需要再次下载依赖库,直接使用之前的缓存就可以了。
使用Webpack时,你会得到一个或多个生成的输出文件,这些文件包含了我们源码的最终输出。而它们由代码块(chunks)组成。
入口(Entry)
入口定义了我们代码中应用是从哪里开始执行的,这也是Webpack开始打包的地方。你可以定义一个入口(常见于单页应用),或者多个入口(常见于多页应用)。
定义一个入口,就会得到一个chunk。如果你只使用字符串定义一个入口,那么这个chunk名为main。如果你使用对象定义了多个入口,那么它们会以entry对象的属性来命名。下面的例子会得到相同的chunk:
// 例1 entry: './src/index.js' // 例2 entry: {main: './src/index.js' }
输出(Output)
在配置文件中,输出配置是一个对象,它指明了Webpack应该在哪儿和如何对我们的打包结果和资源进行输出。虽然可能有多个入口,但是只能有一个输出配置对象。而chunk名称的用处,就在于根据入口对应不同的输出。你可以为我们的打包输出定义一个固定的文件名,但若想代码分离,就不应该这么做。你可以使用[name]为我们的输出文件创建文件名的模板:
output: {filename: '[name].[chunkhash].bundle.js',path: path.resolve(__dirname, 'dist') }
一件值得注意的重要东西是[chunkhash]:它是一个基于文件内容的属于特定chunk的哈希值。它仅会随着文件内容的改变而改变。因此,浏览器就可以利用这一点来缓存它。如果打包输出的文件名变了,浏览器就知道自己需要重新下载它。一个chunkhash可能长这样:0c553ebfd158e16da428。
我们的主chunk会被打包进一个叫main.[chunkhash].bundle.js的文件。
SplitChunksPlugin
由于有了SplitChunksPlugin,你可以把应用中的特定部分移至不同文件。如果一个模块在不止一个chunk中被使用,那么利用代码分离,该模块就可以在它们之间很好地被共享。这是Webpack的默认行为。
// utilities/users.js export default [{ firstName: "Adam", age: 28 },{ firstName: "Jane", age: 24 },{ firstName: "Ben", age: 31 },{ firstName: "Lucy", age: 40 } ] // a.js import _ from 'lodash'; import users from './users';const adam = _.find(users, { firstName: 'Adam' }); // b.js import _ from 'lodash'; import users from './users';const lucy = _.find(users, { firstName: 'Lucy' }); // webpack.config.js module.exports = {entry: {a: "./src/a.js",b: "./src/b.js"},output: {filename: "[name].[chunkhash].bundle.js",path: __dirname + "/dist"} };
如果运行它,你会看到Webpack创建了两个文件:a.[chunkhash].bundle.js和b.[chunkhash].bundle.js,而且每一个文件都包含对lodash库的拷贝:这并不好!我之前说过,为共享的库创建分离的文件是Webpack的一个默认行为,但这只涉及异步的chunk,即意味着只作用于我们异步引入的那些文件。我们会在介绍懒加载的时候讨论这个话题。为了使这个默认行为能支持所有类型的chunks,我们需要稍微改一下Webpack的配置:
// webpack.config.js module.exports = {entry: {a: "./src/a.js",b: "./src/b.js"},output: {filename: "[name].[chunkhash].bundle.js",path: __dirname + "/dist"},optimization: {splitChunks: {chunks: "all"}}, };
现在我们看到,创建了额外的vendors~a~b.[chunkhash].bundle.js文件,它包含了lodash库的代码。这是因为我们默认有一些cacheGroups配置:
splitChunks: {chunks: "all",cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,priority: -10},default: {minChunks: 2,priority: -20,reuseExistingChunk: true}} }
首先,是vendors,它包含的文件来自于你node_modules。再者,是所有其他共享模块的默认缓存组。这里有一个小点:有一些冗余。a.[chunkhash].bundle.js和b.[chunkhash].bundle.js都包含了users.js的内容。这是因为,SplitChunksPlugin默认地只会分离大于30Kb的文件。我们可以轻松地修改它:
// webpack.config.js module.exports = {entry: {a: "./src/a.js",b: "./src/b.js"},output: {filename: "[name].[chunkhash].bundle.js",path: __dirname + "/dist"},optimization: {splitChunks: {chunks: 'all',minSize: 0 // 修改了这里}} };
结果是,它新创建了属于默认缓存组的名为a~b.[chunkhash].bundle.js的文件。因为我们的users.js文件所占空间远远小于30Kb,在没有修改minSize属性的情况下,它不会被打包到单独的分离文件。在真实环境下,这是一件好事,因为这样不会带来实质的性能提升,反而会强制浏览器为分离出的文件(它现在是很小的)再发一次额外的请求。
我们可以进一步,为仅在utilities目录下的做特殊处理:
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: {a: "./src/a.js",b: "./src/b.js"},output: {filename: "[name].[chunkhash].bundle.js",path: __dirname + "/dist"},optimization: {splitChunks: {chunks: "all",cacheGroups: {utilities: {test: /[\\/]src[\\/]utilities[\\/]/,minSize: 0}}}} };
这样我们的输出包含4个文件:a.[chunkhash].bundle.js,b.[chunkhash].bundle.js,vendors~a~b.[chunkhash].bundle.js和utilities~a~b.[chunkhash].bundle.js。(译者注:这需要在打包之前,把users.js文件移至./src/utilities目录下,并修改a.js和b.js中的相关引用路径)。虽然我们现在可以让minSize:0成为全局设置(即放在splitChunks对象中作为其属性),但即使这样,默认的缓存组也不会被创建。因为,所有可能被引入的文件都应该在我们刚创建的utilities组下。这个组具的优先级是0,高于默认缓存组的优先级。你可能已经注意到了,默认缓存组的优先级被设置为了-20。
还有其他的配置供你使用,可查看SplitChunksPlugin文档。
总结
即使你只有一个入口(常发生于大多数单页应用中),把你的依赖放入一个独立的文件依然是个好主意。这其实很容易做到,因为使用SplitChunksPlugin是Webpack 4的默认行为,可能你设置一下chunks: 'all'就足够了。如果你想让我讨论此相关话题,欢迎留言。很快我们将会学习如何使用懒加载,让你的应用性能更上一层楼。敬请期待!
转载于:https://my.oschina.net/powertoolsteam/blog/3013378
Webpack 4教程 - 第四部分,使用SplitChunksPlugin分离代码相关推荐
- 织梦仿站系列教程第四讲——首页页首代码
织梦仿站系列教程第四讲--首页页首代码 今天,我们接上一讲,继续开始我们的仿站之路. 这一讲分两个部分,第一部分,修改首页的页首代码,即之间的代码. 有网页标题title.网页关键字keywords. ...
- Webpack入门教程十四
77.在webpack.config.js中添加minify,设置removeComments为true,删除模板中的注释,修改内容如下 var webpack = require('webpack' ...
- kettle 教程(四):自定义 Java 代码
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qqfo24/article/detai ...
- webpack打包教程
webpack打包教程 基础教程 首先要保证装了nodejs和npm 第一步:创建文件夹,命名为finance-scopa 第二步:win+R,输入cmd,进入命令行窗口, 第三步:进入finance ...
- webpack基础教程
webpack基础教程 一 webpack五大核心 二 webpack处理css资源 三 webpack处理less.scss.sass.styl资源 四 webpack-module的详细配置 五 ...
- matlab图形绘制经典案例,MATLAB经典教程第四章_图形绘制.ppt
<MATLAB经典教程第四章_图形绘制.ppt>由会员分享,可在线阅读,更多相关<MATLAB经典教程第四章_图形绘制.ppt(32页珍藏版)>请在人人文库网上搜索. 1.Ma ...
- Wix 安装部署教程(十四) -- 多语言安装包之用户许可协议
Wix 安装部署教程(十四) -- 多语言安装包之用户许可协议 原文:Wix 安装部署教程(十四) -- 多语言安装包之用户许可协议 在上一篇中,留下了许可协议的问题,目前已经解决.感谢网友武全的指点 ...
- 微信公众平台开发教程(四) 实例入门:机器人(附源码)
微信公众平台开发教程(四) 实例入门:机器人(附源码) 上一篇文章,写了基本框架,可能很多人会觉得晕头转向,这里提供一个简单的例子来予以说明,希望能帮你解开谜团. 一.功能介绍 通过微信公众平台实现在 ...
- webpack 使用教程--实时刷新测试
学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器 可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关 ...
最新文章
- iOS SwiftUI篇-6 专题TabView
- .NET Core EntityFramework生成自动增长的主键
- Mozilla计划向Firefox浏览器中添加违规警告
- 强化学习note2——value iteration和policy iteration的区别,MC和TD的区别
- Flutter StatefulBuilder 用来实现局部数据刷新
- Python链表学习
- python json dumps 自定义_Python json.dumps()用法及代码示例
- 计算机java语言答案,2019年全国计算机二级Java语言练习试题及答案一
- 7.11 其他面向对象设计原则2:能用组合的地方,不要用继承
- ElasticSearch 2 (30) - 信息聚合系列之条形图
- Java8新特性:接口
- (详细)VMware虚拟机安装Windows7镜像
- Delphi开发工具的使用
- HTML中的input type=reset标签失效(不起作用)的可能原因
- 空间换时间,轻松提高性能100倍
- php frameset不显示,php加载frameset页面时显示空白怎么办_后端开发
- 关于html中的图片居中问题
- SIP协议详解(中文)-1
- Java八股文一:java基础知识
- Spring boot读取Excel并存入PG数据库(一)
热门文章
- C语言 输出三角形数列 for循环
- C语言练习-统计数字个数
- (Java)图解排序算法之归并排序
- CCF大专委2020年大数据发展趋势预测
- DT_MACHINE_START 板级信息初始化匹配调用机制实现
- [PATCH] ARM: add dtbImage.dt and dtbuImage.dt rules
- 孙俊 计算机技术资格水平考试,孙俊 - 专家学者 - - 计算机科学与技术 - 中南大学 - 学科服务平台...
- 多路脉冲发生器设计(脉冲个数,脉冲宽度可控)
- 数学之美读书笔记第一章
- 【JDBC-1】jdbc编程六大步骤