详解用webpack的CommonsChunkPlugin提取公共代码的3种方式


Posted in Javascript onNovember 09, 2017

Webpack 的 CommonsChunkPlugin 插件,负责将多次被使用的 JS 模块打包在一起。

CommonsChunkPlugin 能解决的问题

在使用插件前,考虑几个问题:

  1. 对哪些 chunk 进行提取,这决定了 chunks ,children 和 name 要怎么配置
  2. common chunk 是否异步,这决定了 async 怎么配置
  3. common chunk 的粒度,这决定了 minChunks 和 minSize 怎么配置

以下是官方给出的常用的场景:

  1. 提取两个及两个以上 Chunk 的公共代码
  2. 将 Code Split 切割出来的 Chunk「就是子 Chunk」,提取到父 Chunk
  3. 将 Code Split 切割出来的 Chunk,提取到一个新的异步加载的 Chunk
  4. 提取某个类似 jquery 或 react 的代码库

前面我们实现了 多页面分离资源引用,按需引用JS和css

但有一个问题:最后生成的3个js,都有重复代码,我们应该把这部分公共代码单独提取出来。

方式一,传入字符串参数

new webpack.optimize.CommonsChunkPlugin(‘common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js

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
  ]
};

方式二,有选择的提取公共代码

// 提供公共代码
// 默认会把所有入口节点的公共代码提取出来,生成一个common.js
// 只提取main节点和index节点
new webpack.optimize.CommonsChunkPlugin('common.js',['main','index']),

方式三,有选择性的提取(对象方式传参)

推荐

new webpack.optimize.CommonsChunkPlugin({
      name:'common', // 注意不要.js后缀
      chunks:['main','user','index']
    }),

通过CommonsChunkPlugin,我们把公共代码专门抽取到一个common.js,这样业务代码只在index.js,main.js,user.js

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery滚动加载图片效果的实现
Mar 06 Javascript
Javascript高级技巧分享
Feb 25 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
js编写选项卡效果
May 23 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 #Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 #jQuery
简单实现jquery隔行变色
Nov 09 #jQuery
基于Datatables跳转到指定页的简单实例
Nov 09 #Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 #Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 #jQuery
js使用xml数据载体实现城市省份二级联动效果
Nov 08 #Javascript
You might like
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
基于jquery的3d效果实现代码
2011/03/23 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
Vue如何实现组件的源码解析
2017/06/08 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
通过C++学习Python
2015/01/20 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python中for用来遍历range函数的方法
2018/06/08 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
python实现ip代理池功能示例
2019/07/05 Python
python 变量初始化空列表的例子
2019/11/28 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
pygame实现飞机大战
2020/03/11 Python
Python常用外部指令执行代码实例
2020/11/05 Python
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
师德师风事迹材料
2014/12/20 职场文书
寒山寺导游词
2015/02/03 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记