详解用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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
Prototype Class对象学习
Jul 19 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
vue前端工程的搭建
Mar 31 Vue.js
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 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
eclipse创建python项目步骤详解
2019/05/10 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
python__name__原理及用法详解
2019/11/02 Python
如何在django中添加日志功能
2020/02/06 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
自主实习接收函
2014/01/13 职场文书
珠宝店促销方案
2014/03/21 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
护士先进个人总结
2015/02/13 职场文书
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS