详解用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关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 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
php 远程图片保存到本地的函数类
2008/12/08 PHP
PHP中设置时区方法小结
2012/06/03 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
javascript call方法使用说明
2010/01/11 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
Python获取央视节目单的实现代码
2015/07/25 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
python读取和保存图片5种方法对比
2018/09/12 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
Django框架视图函数设计示例
2019/07/29 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
Python3 元组tuple入门基础
2020/02/09 Python
django实现后台显示媒体文件
2020/04/07 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
2014年科室工作总结
2014/11/20 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python