详解webpack4之splitchunksPlugin代码包分拆


Posted in Javascript onDecember 04, 2018

本文讲解的是最近在做的一个多页面项目,结合webpack4的splitChunks进行代码包分拆的过程

项目框架

详解webpack4之splitchunksPlugin代码包分拆

项目有home和topic两个入口文件,主要包括:

  • react、mobx、antd作为项目的基本框架,
  • echarts和d3(画图)是项目中部分页面用到比较大的组件库
  • src下的工作的组件和代码
  • 其他的非公共代码。

两个入口文件都用react-loadable做了异步加载

import Loadable from 'react-loadable';
...
const LoadableLogin = Loadable({
 loader: () => import('../../common/components/login'),
 loading: Loading,
});
...

webpack部分配置相关如下:

module.exports = {
 ...
 mode: 'production',
 entry: { // 多入口
 home: './src/home',
 topic: './src/topic',
 },
 output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
 },
 plugins: [
 new HtmlWebpackPlugin({ // home页面
  filename: 'home.html',
  template: './template.html',
 }),
 new HtmlWebpackPlugin({ // topic页面
  filename: 'topic.html',
  template: './template.html',
  inject: true,
 }),
 ],
 ...
}

splitChunks

chunks:

  • all: 不管文件是动态还是非动态载入,统一将文件分离。当页面首次载入会引入所有的包
  • async: 将异步加载的文件分离,首次一般不引入,到需要异步引入的组件才会引入。
  • initial:将异步和非异步的文件分离,如果一个文件被异步引入也被非异步引入,那它会被打包两次(注意和all区别),用于分离页面首次需要加载的包。

minSize: 文件最小打包体积,单位byte,默认30000

比如说某个项目下有三个入口文件,a.js和b.js和c.js都是100byte,当我们将minSize设置为301,那么webpack就会将他们打包成一个包,不会将他们拆分成为多个包。

比如说某个项目下有三个入口文件,a.js和b.js和c.js都是100byte,当我们将minSize设置为301,那么webpack就会将他们打包成一个包,不会将他们拆分成为多个包。

automaticNameDelimiter: 连接符

假设我们生成了一个公用文件名字叫vendor,a.js,和b.js都依赖他,并且我们设置的连接符是"~"那么,最终生成的就是 vendor~a~b.js

maxInitialRequests 入口点处的最大并行请求数,默认为3

如果我们设置为1,那么每个入口文件就只会打包成为一个文件

maxAsyncRequests 最大异步请求数量,默认5

如果我们设置为1,那么每个入口文件就只会打包成为一个文件

优先级关系

maxInitialRequest / maxAsyncRequests <maxSize <minSize。

cacheGroups 定制分割包的规则

test可以配置正则和写入function作为打包规则。其他属性均可继承splitChunks,这里必须说一下 priority,设置包的打包优先级,非常重要! (后面结合实践)

minChunks

最少引入的次数

实践

我们以一个最简单的配置开始,将公共代码打包出来

splitChunks: {
  chunks: 'all', // initial、async和all
  minSize: 30000, // 形成一个新代码块最小的体积
  maxAsyncRequests: 5, // 按需加载时候最大的并行请求数
  maxInitialRequests: 3, // 最大初始化请求数
  automaticNameDelimiter: '~', // 打包分割符
  name: true,
  cacheGroups: {
  vendors: { // 打包两个页面的公共代码
   minChunks: 2, // 引入两次及以上被打包
   name: 'vendors', // 分离包的名字
   chunks: 'all'
  },
  }
 },

两个入口文件的公共代码被打包到vendor文件夹下面,包括echarts d3 amcharts等一些三方包和src下的公共代码。

详解webpack4之splitchunksPlugin代码包分拆

这当然不是我们想要的结果!存在以下问题:

  • 其实当我们进入网站,一般第一步都是进入一个登陆页面,需要的只是项目的基本框架代码,例如react,react-dom.antd等,我们可以用all(或者initial)将它们单独打包,作为首页必须载入的包
  • 我们打包的公共包,首次加载页面的时候,只想把同步加载的加载进来,所以需要一个同步的Common包
  • 像echarts,d3,以及一些src下面一些异步加载的包,将它们利用async将打包成一个独立异步加载包

我们修改cacheGroups为:

cacheGroups: {
  vendors: { // 项目基本框架等
   chunks: 'all',
   test: /(react|react-dom|react-dom-router|babel-polyfill|mobx)/,
   priority: 100,
   name: 'vendors',
  },
  'async-commons': { // 异步加载公共包、组件等
   chunks: 'async',
   minChunks: 2,
   name: 'async-commons',
   priority: 90,
  },
  commons: { // 其他同步加载公共包
   chunks: 'all',
   minChunks: 2,
   name: 'commons',
   priority: 80,
  },
  }

详解webpack4之splitchunksPlugin代码包分拆

这次webpack帮我们打出来的包主要有:

  • async-common:是两个入口文件都异步加载的三方包和利用react-loader做的懒加载代码,有echarts,d3等
  • vendors: 包括react,react-dom,antd等
  • commons: 引用超过两次的同步代码

这里说两个需要注意的地方:

  • 注意这里我们priority的设置,vendors>async-commons>commons,我们首先将react,react-dom等优先打包出来,然后再打包公共部分,如果将vendors的优先级设置小于两个Common的优先级,那么react,react-dom将会打包到common包,将不会再生成vendors包。
  • 如果我们这里将commons的配置去掉,将会生成一个topic~home的包,我们配置了async-common提取出异步加载的公共包后,将会默认将同步加载的公共包打包生成以automaticNameDelimiter连接符‘~'生成的名字'topic~home'包,内容其实和commons包内容完全一样,

ok!按照我们的要求,这样首次页面加载只会引入vendors,commons包,而不会引入async-common包,还是挺棒的!追求更精致的我们,再认真想想,是不是还可以做一些更好的优化?

到目前为止我们打包文件的打包是这样的:

详解webpack4之splitchunksPlugin代码包分拆

用gzip压缩后,最大的async-common包有391kb。公司说最近因为一些状况,布置到生产后速度慢的时候,有时候只能有20kb/s的下载速度==。。。。于是继续split!

分析一下:

  • async-common中包含了自己写的src组件和第三方组件
  • async-common中比较大是echarts,zrender(echarts引入)和d3,结合项目来说,只有部分页面我们需要echarts(d3同),所以我们可以考虑将d3和echarts这两个比较大的包提取出来,等到某个页面需要的时候,再让其异步加载,这样就大大减小了async-common的体积了。

修改

cacheGroups: {
  vendors: { // 基本框架
   chunks: 'all',
   test: /(react|react-dom|react-dom-router|babel-polyfill|mobx)/,
   priority: 100,
   name: 'vendors',
  },
  d3Venodr: { // 将体积较大的d3单独提取包,指定页面需要的时候再异步加载
   test: /d3/,
   priority: 100, // 设置高于async-commons,避免打包到async-common中
   name: 'd3Venodr',
   chunks: 'async'
  },
  echartsVenodr: { // 异步加载echarts包
   test: /(echarts|zrender)/,
   priority: 100, // 高于async-commons优先级
   name: 'echartsVenodr',
   chunks: 'async'
  },
  'async-commons': { // 其余异步加载包
   chunks: 'async',
   minChunks: 2,
   name: 'async-commons',
   priority: 90,
  },
  commons: { // 其余同步加载包
   chunks: 'all',
   minChunks: 2,
   name: 'commons',
   priority: 80,
  },
  }

详解webpack4之splitchunksPlugin代码包分拆

当然,每次修改后,需要在htmlWebpackPlugin中配置chunk需要的包

plugins: [
 new HtmlWebpackPlugin({ // home页面
  filename: 'home.html',
  template: './template.html',
  chunks: ['vendors', 'commons', 'home'],
 }),
 new HtmlWebpackPlugin({ // topic页面
  filename: 'topic.html',
  template: './template.html',
  chunks: ['vendors', 'commons', 'topic'],
 }),
 ],

后期还做了其他的拆分和优化,大概最大的包保持在100k左右,当然也不建议拆的特别小,因为浏览器http1可能一次性支持6次下载文件,太多可能会适得其反。大家可以根据自己的项目做不同的拆分方法,总而言之,就是为了让项目更完美的在线上运行,给用户更好的体验~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
vue项目中axios使用详解
Feb 07 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
React Native中Mobx的使用方法详解
Dec 04 #Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 #Javascript
elementUI中Table表格问题的解决方法
Dec 04 #Javascript
zepto.js 实时监听输入框的方法
Dec 04 #Javascript
vue 之 css module的使用方法
Dec 04 #Javascript
Vue源码解析之数组变异的实现
Dec 04 #Javascript
小程序指纹验证的实现代码
Dec 04 #Javascript
You might like
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
纯js实现画一棵树的示例
2017/09/05 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
python Flask实现restful api service
2017/12/04 Python
Selenium定位元素操作示例
2018/08/10 Python
python实现剪切功能
2019/01/23 Python
python各类经纬度转换的实例代码
2019/08/08 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
锐步英国官网:Reebok英国
2019/11/29 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
会计顶岗实习心得
2014/01/25 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技