Webpack4教程-第四部分,使用SplitChunksPlugin分离代码
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处: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'就足够了。如果你想让我讨论此相关话题,欢迎留言。很快我们将会学习如何使用懒加载,让你的应用性能更上一层楼。敬请期待!
当前题目:Webpack4教程-第四部分,使用SplitChunksPlugin分离代码
链接分享:http://pwwzsj.com/article/jcojho.html