环境: 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. git 和 github 链接

    第一步  再电脑上安装git 请自行搜索   到你需要的一个目录下:例如/gittest 首先创建文件,然后  git  add  和 git commit  不然直接查看  git branch - ...

  2. Linux内核分析作业第二周

    操作系统是如何工作的 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.函数调用堆栈 1.计算机工作三 ...

  3. 20135316王剑桥Linux内核学习笔记

    王剑桥Linux内核学习笔记 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 计算机是如何工作的 个人理 ...

  4. 2017-2018-2 1723《程序设计与数据结构》第三周作业 & 实验一 总结

    作业地址 第三周作业:https://edu.cnblogs.com/campus/besti/CS-IMIS-1723/homework/1667 提交情况如图: 实验一:https://edu.c ...

  5. 软工实践周六实践课安排(2017秋学期) | K 班

    软工实践周六实践课安排(2017秋学期) | K 班 周数 截止时间 工作内容 阶段成果展示形式 验收方式 备注 4之前 2017.10月前 组队 随笔(提供组队名单.组队队员的介绍--包括擅长的地方 ...

  6. Visual Studio 2015的安装和简单的测试

    首先是Visual Studio 2015的安装 Visual Studio是微软开发的一套基于组件的软件开发工具,目前最新的版本是2015. 在 I Tell you 网站下载Visual Stud ...

  7. ELK 性能(3) — 在 Docker 上运行高性能容错的 Elasticsearch 集群

    ELK 性能(3) - 在 Docker 上运行高性能容错的 Elasticsearch 集群 介绍 在 Docker 上运行高性能容错的 Elasticsearch 集群 内容 通常熟悉的开发流程是 ...

  8. Docker(二十四)-Docker使用Portainer搭建可视化界面

    Portainer介绍 Portainer是Docker的图形化管理工具,提供状态显示面板.应用模板快速部署.容器镜像网络数据卷的基本操作(包括上传下载镜像,创建容器等操作).事件日志显示.容器控制台 ...

  9. Caffe使用: Ubuntu 14.04(x64) 从cuda 7.0 升级到 cuda8.0

    由于之前已经在Ubuntu 14.04 x64上面安装cuda7.0+caffe, 并且已经配置好,caffe也已经跑通. 但是最近需要使用Torch,而Torch对cuda的要求是8.0,因此决定对 ...

  10. 常用OLAP引擎

    l  presto Presto是Facebook开发的分布式大数据SQL查询引擎,专门进行快速数据分析. 特点: 可以将多个数据源的数据进行合并,可以跨越整个组织进行分析. 直接从HDFS读取数据, ...