环境: 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甲题题解-1030. Travel Plan (30)-最短路+输出路径

    模板题最短路+输出路径如果最短路不唯一,输出cost最小的 #include <iostream> #include <cstdio> #include <algorit ...

  2. 2-Fifteenth Scrum Meeting-20151215

    任务安排 成员 今日完成 明日任务 闫昊 修复bug  写完学习进度记录的数据库操作 唐彬 编写与服务器交互的代码  编写与服务器交互的代码 史烨轩 获取视频url   余帆 修复bug  本地路径的 ...

  3. Linux内核分析-构造一个简单的Linux系统MenuOS

    构造一个简单的Linux系统MenuOS linux内核目录结构 arch目录包括了所有和体系结构相关的核心代码.它下面的每一个子目录都代表一种Linux支持的体系结构,例如i386就是Intel C ...

  4. 做业5.2 TDD

    package runok;import java.util.*;import java.awt.*;import java.awt.event.ActionEvent;import java.awt ...

  5. RabbitMQ-从基础到实战(3)— 消息的交换(上)

    转载请注明出处 0.目录 RabbitMQ-从基础到实战(1)— Hello RabbitMQ RabbitMQ-从基础到实战(2)— 防止消息丢失 RabbitMQ-从基础到实战(4)— 消息的交换 ...

  6. Windows 2012r2 以及以上版本远程提示错误的解决方法

    部分机器远程时会提示如图: 其实解决问题非常简单 .... 为了防止不会操作 完整的截图展示. 服务器下面进行处理 打开我的电脑 属性 打开远程设置 将框中的选项取消掉 然后就可以了.

  7. 如何设置Listbox的行间距?

    关于Listbox的问题? 1. 如何设置Listbox的行间距?  2. 如何实现当鼠标点击Listbox时,被选中的那一行在鼠标点击处出现一控件?    也就是怎么计算出被选中的那一行鼠标点击处的 ...

  8. 如何让搜索引擎抓取AJAX内容?

    越来越多的网站,开始采用"单页面结构"(Single-page application). 整个网站只有一张网页,采用Ajax技术,根据用户的输入,加载不同的内容. 这种做法的好处 ...

  9. JS频率控制函数

    /** * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次 * @param {Function} fn 需要调用的函数 * @param {Number} delay 延迟时间 ...

  10. Python之路:Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...