内容简介:在当前的前端项目中,常常使用 gulp、webpack、Browserify 等将多个文件压缩合并成一个。这个过程称为打包。 打包是一个将文件引入并合并到一个单独文件的过程,最终形成一个 “bundle”。接着在页面上引入该 bundle,整个应用即可一次性加载。打包是个非常棒的技术,但随着你的应用增长,你的代码包也将随之增长。尤其是在整合了体积巨大的第三方库的情况下。你需要关注你代码包中所包含的代码,以避免因体积过大而导致加载时间过长。为了避免搞出大体积的代码包,在前期就思考该问题并对代码包进行分割是个不
在当前的前端项目中,常常使用 gulp、webpack、Browserify 等将多个文件压缩合并成一个。这个过程称为打包。 打包是一个将文件引入并合并到一个单独文件的过程,最终形成一个 “bundle”。接着在页面上引入该 bundle,整个应用即可一次性加载。
打包是个非常棒的技术,但随着你的应用增长,你的代码包也将随之增长。尤其是在整合了体积巨大的第三方库的情况下。你需要关注你代码包中所包含的代码,以避免因体积过大而导致加载时间过长。
为了避免搞出大体积的代码包,在前期就思考该问题并对代码包进行分割是个不错的选择。代码分割是由诸如 Webpack(代码分割)和 Browserify(factor-bundle)这类打包器支持的一项技术,能够创建多个包并在运行时动态加载。
对应用进行代码分割能够帮助你“懒加载”当前用户所需要的内容,能够显著地提高你的应用性能。尽管并没有减少应用整体的代码体积,但你可以避免加载用户永远不需要的代码,并在初始加载的时候减少所需加载的代码量。
关键点
打包解决了以来文件过多,而导致 http 请求过多的问题
代码分割则是解决打包的副作用——单文件过大,导致加载时间过长。
因此代码分割的关键点在于,如何控制 分割粒度 :
- 分割文件多少
- 文件大小
分割方法
有三种常用的代码分离方法:
entry
entry
每个 entry
都会在最后的打包中输出一个对应的文件。因此可以显示地进行代码分割:
module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, // ... output: { filename: '[name].[chunkhash].js', path: path.resolve(__dirname, './dist') } } 复制代码
进行打包构建后会在 dist
文件夹输出:
app.f7badf83cc90de106d41.js print.e00bba994e917cc7fc59.js 复制代码
动态导入
动态导入也可以达到代码分割的效果:
import _ from 'lodash'; function component() { var element = document.createElement('div'); // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的 element.innerHTML = _.join(['你好呀', 'webpack'], ' '); element.onclick = (e) => import(/* webpackChunkName: "print" */ './print').then((Print) => { }) return element; } document.body.appendChild(component()); 复制代码
webpackChunkName
设置了输出包的名字。
module.exports = { entry: { app: './src/index.js' }, // ... output: { filename: '[name].[chunkhash].js', chunkFilename: '[name].[chunkhash].js', path: path.resolve(__dirname, './dist') } } 复制代码
output
的 chunkFilename
决定了非入口(non-entry) chunk 文件的名称。这里的 chunk 是通过代码分割产生的,因此这里通过此选项来设置文件的名字。
运行打包:
app.73efde30ee057cb8c817.js print.e4408db3b4e5072295de.js 复制代码
插件
CommonsChunkPlugin
在 webpack 4 之前,使用 CommonsChunkPlugin
进行公共 chunk 抽取。
module.exports = { entry: './src/index.js', entry: { main: './src/index.js', vendor: [ 'lodash' ] }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: 'Caching' }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' }) ], output: { filename: '[name].[chunkhash].js', path: path.resolve(__dirname, 'dist') } }; 复制代码
这里有两点值得注意:
-
entry
中的vendor
:显式引用lodash
,由于index.js
也导入了lodash
,因此它就变成了一个公共的模块。 -
使用
new webpack.optimize.CommonsChunkPlugin
抽取这些公共模块
SplitChunksPlugin
webpack 4 之后 CommonsChunkPlugin
被弃用了,使用 SplitChunksPlugin
代替。 SplitChunksPlugin
是开箱即用的,只需要在 module.exports
中进行配置:
module.exports = { //... optimization: { splitChunks: { cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, name: 'vendor', chunks: 'initial', minChunks: 2 } } } }, output: { filename: '[name].[chunkhash].js', chunkFilename: '[name].[chunkhash].js', path: path.resolve(__dirname, './dist') } }; 复制代码
上面的配置会将 node_modules
下引用的所有模块都使用 vendor
这个作为 chunk 名以 output
中 chunkFilename
设置的格式打包到 dist
文件夹中。
SplitChunksPlugin
的选项:
cacheGroups 中每一项都接收如下参数:
-
filename: 重写 chunk 命名方式
vendors: { test: /[\\/]node_modules[\\/]/, name: 'vendor', filename:'[name].bundle.js' chunks: 'initial', minChunks: 2, } 复制代码
最后会生成名字为
vendor.bundle.js
的文件
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- React服务端渲染(代码分割和数据预取)
- webpack4系列教程(六):使用SplitChunksPlugin分割代码
- 从零开始实现穿衣图像分割完整教程(附python代码演练)
- webpack4.29.x成神之路(十九) css代码分割
- webpack4.29.x成神之路(十五) 代码分割(code spliting)上
- CVPR2019| 12篇CVPR论文开源代码(DeepFashion2/语义分割/人脸数据集基准等)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。