详解用webpack的CommonsChunkPlugin提取公共代码的3种方式(注意webpack4.0版本已不存在)
Webpack 的 CommonsChunkPlugin 插件,负责将多次被使用的 JS 模块打包在一起。
CommonsChunkPlugin 能解决的问题
在使用插件前,考虑几个问题:
- 对哪些 chunk 进行提取,这决定了 chunks ,children 和 name 要怎么配置
- common chunk 是否异步,这决定了 async 怎么配置
- common chunk 的粒度,这决定了 minChunks 和 minSize 怎么配置
以下是官方给出的常用的场景:
- 提取两个及两个以上 Chunk 的公共代码
- 将 Code Split 切割出来的 Chunk「就是子 Chunk」,提取到父 Chunk
- 将 Code Split 切割出来的 Chunk,提取到一个新的异步加载的 Chunk
- 提取某个类似 jquery 或 react 的代码库
前面我们实现了 多页面分离资源引用,按需引用JS和css
但有一个问题:最后生成的3个js,都有重复代码,我们应该把这部分公共代码单独提取出来。
方式一,传入字符串参数
new webpack.optimize.CommonsChunkPlugin(‘common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
var HtmlWebpackPlugin = require( 'html-webpack-plugin' ); var webpack = require( 'webpack' ); var extractTextPlugin = require( 'extract-text-webpack-plugin' ); module.exports = { // entry是入口文件,可以多个,代表要编译那些js //entry:['./src/main.js','./src/login.js','./src/reg.js'], entry: { 'main' : './src/main.js' , 'user' :[ './src/login.js' , './src/reg.js' ], 'index' :[ './src/index.js' ] }, externals:{ 'jquery' : 'jQuery' }, module:{ loaders:[ // {test:/\.css$/,loader:'style-loader!css-loader'}, {test:/\.css$/,loader:extractTextPlugin.extract( 'style' , 'css' )} ], }, output:{ path: __dirname+ '/build/js' , // 输出到那个目录下(__dirname当前项目目录) filename: '[name].js' //最终打包生产的文件名 }, plugins:[ new HtmlWebpackPlugin({ filename: __dirname+ '/build/html/login-build.html' , template:__dirname+ '/src/tpl/login.html' , inject: 'body' , hash: true , chunks:[ 'main' , 'user' , 'common.js' ] // 这个模板对应上面那个节点 }), new HtmlWebpackPlugin({ filename: __dirname+ '/build/html/index-build.html' , template:__dirname+ '/src/tpl/index.html' , inject: 'body' , hash: true , chunks:[ 'index' , 'common.js' ] // 这个模板对应上面那个节点 }), // css抽取 new extractTextPlugin( "[name].css" ), // 提供公共代码 new webpack.optimize.CommonsChunkPlugin( 'common.js' ), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js ] }; |
方式二,有选择的提取公共代码
1
2
3
4
|
// 提供公共代码 // 默认会把所有入口节点的公共代码提取出来,生成一个common.js // 只提取main节点和index节点 new webpack.optimize.CommonsChunkPlugin( 'common.js' ,[ 'main' , 'index' ]), |
方式三,有选择性的提取(对象方式传参)
推荐
1
2
3
4
|
new webpack.optimize.CommonsChunkPlugin({ name: 'common' , // 注意不要.js后缀 chunks:[ 'main' , 'user' , 'index' ] }), |
通过CommonsChunkPlugin,我们把公共代码专门抽取到一个common.js,这样业务代码只在index.js,main.js,user.js
https://segmentfault.com/a/1190000012828879(详解commonsChunkPlugin)
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式(注意webpack4.0版本已不存在)的更多相关文章
- [转] 用webpack的CommonsChunkPlugin提取公共代码的3种方式
方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...
- webpack学习笔记--提取公共代码
为什么需要提取公共代码 大型网站通常会由多个页面组成,每个页面都是一个独立的单页应用. 但由于所有页面都采用同样的技术栈,以及使用同一套样式代码,这导致这些页面之间有很多相同的代码. 如果每个页面的代 ...
- webpack CommonsChunkPlugin 提取公共代码
1.项目结构 2.部分代码 module.js console.log('module.js'); index文件夹下的index.js require('../module.js'); consol ...
- 使用webpack.optimize.CommonsChunkPlugin提供公共代码
在webpack4里使用webpack.optimize.CommonsChunkPlugin时,报错,webpack4删除了常用的 CommonsChunkPlugin ,提示我们用config.o ...
- webpack散记---提取公共代码
(1)作用: 减少代码冗余 提高加载速度 (2)来源 commonsChunkPlugin webpack.optimize.CommonsChunkPlugin (3)配置 { plugins:[ ...
- 基于webpack实现多html页面开发框架六 提取公共代码
一.解决什么问题 1.如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包 2.单独打包common.js对性能有帮助,浏览 ...
- webpack4 系列教程(三): 多页面解决方案--提取公共代码
这节课讲解webpack4打包多页面应用过程中的提取公共代码部分.相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPl ...
- 基于 Webpack 引入公共库的几种方式
以 jquery 和其插件 jquery-modal 为例,记录下引入公共库的几种方式. 为了方便,首先安装 jquery 和 jquery-modal: cnpm i jquery jquery-m ...
- 十图详解tensorflow数据读取机制(附代码)转知乎
十图详解tensorflow数据读取机制(附代码) - 何之源的文章 - 知乎 https://zhuanlan.zhihu.com/p/27238630
随机推荐
- Swift学习笔记5
1.你可以将一个继承来的只读属性重写为一个读写属性,只需要在重写版本的属性里提供 getter 和 setter 即可.但是,你不可以将一个继承来的读写属性重写为一个只读属性. 2.你可以通过把方法, ...
- 学习windows编程 day4 之视口和窗口
LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) { HDC hdc; PAINTSTRU ...
- Java Web之路(一)Servlet
前言 执行过程 Servlet 生命周期.工作原理:http://www.cnblogs.com/xuekyo/archive/2013/02/24/2924072.html Servlet的生命周期 ...
- golang error信息转字符串 x := fmt.Sprintf("%s", err)
_, _, ch, err := m.ZkConn.ChildrenW(node) if err != nil { x := fmt.Sprintf("%s", err) if s ...
- SQL——Hibernate SQL增删改查
1.查询list数据 实例:user login public String userLogin(){ Session session = HibernateSessionFactory.getSes ...
- C++内存管理(转)http://www.cnblogs.com/qiubole/archive/2008/03/07/1094770.html
[导语] 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的检查代码和对C++的痛恨,但内存管理在C++中无处不 ...
- JavaScript之Dom操作【删除当前节点】
//最新更新:2017-11-25 //现在可以通过更强大而快捷的方式为所有的HTMLElement元素的Dom操作扩展新的方法[注意事项:处理HTMLElemnt元素时,此法对IE-8无效] //原 ...
- CSS之清除浮动(span/clearfix)
一.问题描述 web网页设计中,在div元素中有时候常伴有图文结合的post组件.为了使得文本在图像周围环绕,那么需要对图像区域使用float浮动.如果不做清除浮动,则会出现如下结果: 图像比文本高, ...
- Eclipse通用设置
分类 Eclipse分为64位.32位,安装版.免安装版 查看Eclipse版本信息 Help - About Eclipse - Installation Details
- break case
#include<stdio.h> main() { ; switch (g){ : : printf("haha"); break; : printf("h ...