详解用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 相关文章推荐
js保留小数点后几位的写法
Jan 03 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
jquery插件格式实例分析
Jun 16 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
详解vue-cli3使用
Aug 14 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
5种 JavaScript 方式实现数组扁平化
Oct 05 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
PHP 读取文件的正确方法
2009/04/29 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
学习python类方法与对象方法
2016/03/15 Python
python pyheatmap包绘制热力图
2018/11/09 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
COSETTE官网:奢华,每天
2020/03/22 全球购物
经典c++面试题六
2012/01/18 面试题
供货协议书
2014/04/22 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
赡养老人协议书范本
2015/08/06 职场文书
小学教代会开幕词
2016/03/04 职场文书