环境: webpack4.6 + html-webpack-plugin 多页面多入口

经多次研究,稍微靠谱可用的配置

    optimization: {
splitChunks: {
minSize: 30000,
cacheGroups: {
common: {
chunks: "initial",
minChunks:3,
name: "common",
enforce: true
}
}
}
},

注意name这个属性,是提取出来的块的名称,不完美的是,还要在html-webpack-plugin 的 chunks中加载

参考资料:https://www.jianshu.com/p/3066d96aec8b

记webpack下提取公共js代码的方法的更多相关文章

  1. webpack提取公共js代码

    webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一.分析 webpack默认打包js代码时,是将从入口js模块开始,将入口js模块所依赖的js以及模块逐层依赖的模 ...

  2. webpack CommonsChunkPlugin 提取公共代码

    1.项目结构 2.部分代码 module.js console.log('module.js'); index文件夹下的index.js require('../module.js'); consol ...

  3. webpack散记---提取公共代码

    (1)作用: 减少代码冗余 提高加载速度 (2)来源 commonsChunkPlugin webpack.optimize.CommonsChunkPlugin (3)配置 { plugins:[ ...

  4. webpack配置提取公共代码

    公共代码提取功能是针对多入口文件的: 背景:在pageA.js和pageB.js中分别引用subPageA.js和subPageB.js webpack.config.js文件: var path = ...

  5. 记webpack下进行普通模块化开发基础配置(自动打包生成html、多入口多页面)

    写本记时(2018-06-25)的各版本 "webpack": "^4.6.0"  //可直接使用4x以上的开发模式,刷新很快 "webpack-de ...

  6. 记webpack下引入vue的方法(非.vue文件方式)

    直接script引入下载静态的vue.js文件则最后用copy-webpack-plugin复制到一样的目录即可 使用npm安装的vue无法直接用 import vue from "vue& ...

  7. $.ajax 在请求没有完成,是可以往下继续执行js代码的

    $.ajax({ url:url, data:{}, success:function(arr) { var varHtml='<option value="" checke ...

  8. 【微信小程序】 引用公共js里的方法

    一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们 ...

  9. angularJS入门小Demo【简单测试js代码的方法】

    1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...

随机推荐

  1. PAT甲题题解-1017. Queueing at Bank (25)-模拟

    有n个客户和k个窗口,给出n个客户的到达时间和需要的时长有空闲的窗口就去办理,没有的话就需要等待,求客户的平均时长.如果在8点前来的,就需要等到8点.如果17点以后来的,则不会被服务,无需考虑. 按客 ...

  2. RYU 灭龙战 first day

    RYU 灭龙战 first day 前言 由于RYU翻译过来是龙的意思,此次主题就叫灭龙战吧 灵感来源 恶龙的三位真火-问题所在 参照了官方文档的基本操作 笔者以此执行 一个终端里 sudo mn - ...

  3. Winform设置托盘程序,托盘显示

    1.拖一个NotifyIcon,一个ContextMenuStrip控件到主窗体中 2.设置notifyIcon1,一个contextMenuStrip1(如下图) Icon为托盘图标,Text托盘显 ...

  4. cxgrid多选删除

    设置OptionsData选项中的Editing设为True,按着Shift和Ctrl可实现多选 SelectionChanged事件 For i:= 0 To cxGrid1DBTableView1 ...

  5. k8s kubectl edit 方式修改 nodeport 的端口

    0. 买了一本 每天五分钟玩转 k8s 还有 刚才转帖的blog 里面有一个 kubectl edit 的语法能够在线更改端口号 ,之前一直没弄明白. 刚才做了下实验.发现很好用 这里记录一下. 1. ...

  6. Spring IOC AOP的原理 如果让你自己设计IOC,AOP如何处理(百度)

    百度的面试官问,如果让你自己设计一个IOC,和AOP,如何设计, 我把IOC的过程答出来了,但是明显不对, (1) IOC 利用了反射,自己有个id,classtype,hashmap,所有的功能都在 ...

  7. BZOJ2744 HEOI2012朋友圈(二分图匹配)

    先考虑B国.容易发现a xor b mod 2=0即二进制末位相同,那么可以据此将所有人分成两部分,每一部分各自是一个完全图.然后再将a or b有奇数个1的边连上,现在需要求的就是这样一个图里的最大 ...

  8. MT【198】连乘积放缩

    (2018中科大自招最后一题)设$a_1=1,a_{n+1}=\left(1+\dfrac{1}{n}\right)^3(n+a_n)$证明:(1)$a_n=n^3\left(1+\sum\limit ...

  9. 做前端好还是Java好?

    做前端好还是Java好?看这三方面 转载 2017年11月14日 00:00:00 1047这几年来伴随着互联网的迅速发展,新兴互联网产业的兴起,传统行业也逐渐开始互联网化,使得互联网职业在这样的背景 ...

  10. 【BZOJ1434】[ZJOI2009]染色游戏(博弈论)

    [BZOJ1434][ZJOI2009]染色游戏(博弈论) 题面 BZOJ 洛谷 题解 翻硬币的游戏我似乎原来在博客里面提到过,对于这类问题,当前局面的\(SG\)函数就是所有反面朝上的硬币单一存在时 ...