一、解决什么问题

  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页面开发框架六 提取公共代码的更多相关文章

  1. 基于webpack实现多html页面开发框架一 准备工作

    本系列主要介绍如何基于webpack实现多html页面开发框架,这里不讲webpack的基本概念,废话不多说,直奔主题! 前置条件: 1.安装node环境,自己去官网下载安装 2.新建文件夹webpa ...

  2. 基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离

    本节主要介绍webpack打包的时候CSS的处理方式 一.解决什么问题      1.CSS打包      2.CSS处理浏览器兼容      3.SASS支持      4.CSS分离成单独的文件 ...

  3. 基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用

    一.解决什么问题 1.html中img引入的图片地址没有被替换,找不到图片 2.html公共部分复用问题,如头部.底部.浮动层等 二.html中img引入图片问题解决 1.在index.html插入i ...

  4. 基于webpack实现多html页面开发框架五 开发环境配置 babel配置

    一.解决什么问题      1.开发环境js.css不压缩,可在浏览器选中代码调试      2.开发环境运行http服务指向打包后的文件夹      3.babel输出浏览器兼容的js代码 二.需要 ...

  5. 基于webpack实现多html页面开发框架四 自动写入多入口,自动插入多个htmlWebpackPlugin插件

    一.解决什么问题      1.手写页面多入口,一个一个输入太麻烦,通过代码实现      2.手写多个htmlWebpackPlugin插件太麻烦,通过代码实现 二.多入口代码实现 //读取所有.j ...

  6. 基于webpack实现多html页面开发框架三 图片等文件路径替换、并输出到打包目录

    一.解决什么问题      1.图片路径替换.并输出到打包目录      2.输出目录清理 二.需要安装的包 file-loader:html.css中图片路径替换,图片输出到打包目录:命令:npm ...

  7. 基于webpack实现多html页面开发框架七 引入第三方库如jquery

    一.解决什么问题 1.如何引入第三方库,如jquery等 二.引入jquery方法 1.下载jquery.min.js放到assets/lib下面 2.安装copy-webpack-plugin,将已 ...

  8. webpack学习笔记--提取公共代码

    为什么需要提取公共代码 大型网站通常会由多个页面组成,每个页面都是一个独立的单页应用. 但由于所有页面都采用同样的技术栈,以及使用同一套样式代码,这导致这些页面之间有很多相同的代码. 如果每个页面的代 ...

  9. webpack4 系列教程(三): 多页面解决方案--提取公共代码

    这节课讲解webpack4打包多页面应用过程中的提取公共代码部分.相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPl ...

随机推荐

  1. AutoCad 二次开发 .net 之创建Table

    我使用了COM对象来在cad2018中创建table表格,需要的ObjectArx开发包可以在官网上下载,并且需要使用.netframework4.6的库才行. 项目里除了引用常规的Cad开发dll, ...

  2. 二叉查找树学习笔记(BST)

    我土了....终于开始看平衡树了,以前因为害怕一直不敢看数据结构...浑浑噩噩跟同学落了1—2个数据结构没看....果然,我是最弱的 二叉查找树,遵守每个点的左儿子小于点小于右儿子. 于是,BST能够 ...

  3. Tornado 异步socketTCP通信

    Tornado 有 TCPClient 和 TCPServer 两个类,可用于实现 tcp 的客户端和服务端.事实上,这两个类都是对iostream的简单包装. 真正重要的是 iostream ios ...

  4. linux 命令 | 常用命令导图(0)

  5. linux防火墙相关。

    ubuntu 系统默认已安装ufw. 1.安装 sudo apt-get install ufw 2.启用 sudo ufw enable sudo ufw default deny 运行以上两条命令 ...

  6. 在ubuntu中编译内核是用make menuconfig报错:package 'ncurses' has n

    执行过程如下: root@zyx-VirtualBox:~# cd /opt/EmbedSky/ root@zyx-VirtualBox:/opt/EmbedSky# cd linux-2.6.30. ...

  7. ios jquery css('left')无法读取属性解决的方法

    ios jquery css('left')无法读取属性解决的方法 <pre>$(this).position().left因为display:none状态下是读取不了 $(this).o ...

  8. hdu 1863 畅通工程 (并查集 、 kruskal)

    畅通工程Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  9. Maven系列第9篇:多环境构建支持,核心开发必备!

    maven系列目标:从入门开始开始掌握一个高级开发所需要的maven技能. 这是maven系列第9篇. 整个maven系列的内容前后是有依赖的,如果之前没有接触过maven,建议从第一篇看起,本文尾部 ...

  10. vscode加入到鼠标右键

    新建.reg的文件,复制下面代码,然后运行 D:\\软件\\VsCode\\Microsoft VS Code\\Code.exe路径改为自己的,必须是两个 \\ 才能生效 Windows Regis ...