基于webpack实现多html页面开发框架六 提取公共代码
一、解决什么问题
1、如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包
2、单独打包common.js对性能有帮助,浏览器下载一次后会缓存下来,不会重复下载
二、未抽取公共代码的状况
基于之前代码,测试如下:
1、在assets/js文件夹下新建common.js,输入如下代码:
export function printCommon(){
console.log("common");
}
2、在src/index文件夹下的index.js引入common.js,调用printCommon
3、在src/home文件夹下的index.js引入common.js,调用printCommon
4、测试结果如下:
很明显common.js分别打包到了home.js和index.js,造成了重复打包,且不能利用浏览器缓存的优点
三、抽取公共代码后的状况
1、需要用到的插件SplitChunksPlugin,个人理解该插件主要是解决重复引用的问题,官网详细介绍https://webpack.js.org/plugins/split-chunks-plugin/
详细描述一个配置属性chunks:拆分模块的范围它有三个值async、initial和all
async表示只从异步加载得模块(动态加载import())里面进行拆分
initial表示只从入口模块进行拆分
all表示以上两者都包括
2、如何配置splitChunks,如下:
// 提取公共代码
optimization: {
splitChunks: {
cacheGroups: {
vendor: { // 抽离第三方插件
test: /node_modules/, // 指定是node_modules下的第三方包
chunks: 'initial', // 拆分模块的范围
name: 'vendor', // 打包后的文件名,任意命名
// 设置优先级,防止和自定义的公共代码提取时被覆盖,不进行打包
priority: 10
},
utils: { // 抽离自己写的公共代码,common这个名字可以随意起
chunks: 'initial',
name: 'common', // 任意命名
minSize: 0, // 只要超出0字节就生成一个新包
minChunks: 2 //
}
}
}
},
3、配置完重新运行npm run dev 效果如下:
头部引用超过两次的公共代码进行了单独打包,common.js和vendor.js
再次打开home页面,看common.js和vendor.js是否重新下载,状态为304,引用的缓存
源码地址:https://github.com/James-14/webpack4_multi_page_demo
写的不对之处请大家批评指正~~~~!!!!!!
文章原创,转载请注明出处,谢谢!
基于webpack实现多html页面开发框架六 提取公共代码的更多相关文章
- 基于webpack实现多html页面开发框架一 准备工作
本系列主要介绍如何基于webpack实现多html页面开发框架,这里不讲webpack的基本概念,废话不多说,直奔主题! 前置条件: 1.安装node环境,自己去官网下载安装 2.新建文件夹webpa ...
- 基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离
本节主要介绍webpack打包的时候CSS的处理方式 一.解决什么问题 1.CSS打包 2.CSS处理浏览器兼容 3.SASS支持 4.CSS分离成单独的文件 ...
- 基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用
一.解决什么问题 1.html中img引入的图片地址没有被替换,找不到图片 2.html公共部分复用问题,如头部.底部.浮动层等 二.html中img引入图片问题解决 1.在index.html插入i ...
- 基于webpack实现多html页面开发框架五 开发环境配置 babel配置
一.解决什么问题 1.开发环境js.css不压缩,可在浏览器选中代码调试 2.开发环境运行http服务指向打包后的文件夹 3.babel输出浏览器兼容的js代码 二.需要 ...
- 基于webpack实现多html页面开发框架四 自动写入多入口,自动插入多个htmlWebpackPlugin插件
一.解决什么问题 1.手写页面多入口,一个一个输入太麻烦,通过代码实现 2.手写多个htmlWebpackPlugin插件太麻烦,通过代码实现 二.多入口代码实现 //读取所有.j ...
- 基于webpack实现多html页面开发框架三 图片等文件路径替换、并输出到打包目录
一.解决什么问题 1.图片路径替换.并输出到打包目录 2.输出目录清理 二.需要安装的包 file-loader:html.css中图片路径替换,图片输出到打包目录:命令:npm ...
- 基于webpack实现多html页面开发框架七 引入第三方库如jquery
一.解决什么问题 1.如何引入第三方库,如jquery等 二.引入jquery方法 1.下载jquery.min.js放到assets/lib下面 2.安装copy-webpack-plugin,将已 ...
- webpack学习笔记--提取公共代码
为什么需要提取公共代码 大型网站通常会由多个页面组成,每个页面都是一个独立的单页应用. 但由于所有页面都采用同样的技术栈,以及使用同一套样式代码,这导致这些页面之间有很多相同的代码. 如果每个页面的代 ...
- webpack4 系列教程(三): 多页面解决方案--提取公共代码
这节课讲解webpack4打包多页面应用过程中的提取公共代码部分.相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPl ...
随机推荐
- AutoCad 二次开发 .net 之创建Table
我使用了COM对象来在cad2018中创建table表格,需要的ObjectArx开发包可以在官网上下载,并且需要使用.netframework4.6的库才行. 项目里除了引用常规的Cad开发dll, ...
- 二叉查找树学习笔记(BST)
我土了....终于开始看平衡树了,以前因为害怕一直不敢看数据结构...浑浑噩噩跟同学落了1—2个数据结构没看....果然,我是最弱的 二叉查找树,遵守每个点的左儿子小于点小于右儿子. 于是,BST能够 ...
- Tornado 异步socketTCP通信
Tornado 有 TCPClient 和 TCPServer 两个类,可用于实现 tcp 的客户端和服务端.事实上,这两个类都是对iostream的简单包装. 真正重要的是 iostream ios ...
- linux 命令 | 常用命令导图(0)
- linux防火墙相关。
ubuntu 系统默认已安装ufw. 1.安装 sudo apt-get install ufw 2.启用 sudo ufw enable sudo ufw default deny 运行以上两条命令 ...
- 在ubuntu中编译内核是用make menuconfig报错:package 'ncurses' has n
执行过程如下: root@zyx-VirtualBox:~# cd /opt/EmbedSky/ root@zyx-VirtualBox:/opt/EmbedSky# cd linux-2.6.30. ...
- ios jquery css('left')无法读取属性解决的方法
ios jquery css('left')无法读取属性解决的方法 <pre>$(this).position().left因为display:none状态下是读取不了 $(this).o ...
- hdu 1863 畅通工程 (并查集 、 kruskal)
畅通工程Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- Maven系列第9篇:多环境构建支持,核心开发必备!
maven系列目标:从入门开始开始掌握一个高级开发所需要的maven技能. 这是maven系列第9篇. 整个maven系列的内容前后是有依赖的,如果之前没有接触过maven,建议从第一篇看起,本文尾部 ...
- vscode加入到鼠标右键
新建.reg的文件,复制下面代码,然后运行 D:\\软件\\VsCode\\Microsoft VS Code\\Code.exe路径改为自己的,必须是两个 \\ 才能生效 Windows Regis ...