webpack进阶——缓存与独立打包的用法


Posted in Javascript onAugust 02, 2017

本文介绍了webpack进阶——缓存与独立打包的用法,分享给大家,希望对大家有帮助

先来看看最基础的webpack配置:

var path = require('path');
 
module.exports = {
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
 }
}

在index.js中引入了lodash库:

src/index.js:

import _ from 'lodash';
 
 function component() {
  var element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 
  return element;
 }
 
 document.body.appendChild(component());

打包之后,只会生成一个bundle.js,这样的话,每次若要加载资源文件,浏览器都会加载根本不会改动的lodash库,这样很低效。

由于如果每次去访问浏览器,浏览器都重新下载资源,由于网络获取资源可能很慢,可能页面久久加载不出来,低效且不友好,故浏览器会缓存资源,以避免每次访问都通过网络去获取资源。

但是,由于浏览器缓存,又会出现新的问题,如果我们部署版本时不更改资源的文件名,浏览器可能认为它没有更新,就会使用它的缓存版本。

这样我们就需要解决两个问题:第一,分离打包文件。第二,解决缓存问题。

const path = require('path');
const webpack = require('webpack');
 
module.exports = {
 entry: {
  common: ['lodash'],
  app: './src/index.js'
 },
 output: {
  filename: '[name].[hash].js',
  path: path.resolve(__dirname, 'dist')
 },
 plugins: [
  new webpack.optimize.CommonsChunkPlugin({
   name: 'common' // 指代index.js引入的lodash库
  })
 ]
}

主要变动:

  • 添加插件:CommonsChunkPlugin,提取引入的库,并且更名,实现代码分离。
  • 输出上在名字上加了hash,每次打包后,hash值都不一样解决了浏览器缓存的问题。

结果:index.js打包为app.[hash].js,index.js引入的lodash打包为common.[hash].js。这样解决了浏览器缓存问题和实现了静态资源代码和源代码的分离,但是新的问题又出现了。

第一次打包后(注意Asset列下的名字):

webpack进阶——缓存与独立打包的用法

每次我们修改源代码时,再次打包,不仅仅index生成app.[hash].js的hash值发生了变化,

webpack进阶——缓存与独立打包的用法

而且common.[hash].js的hash值与app的hash值相同也发生了变化(可以自行测试一下,先webpack打包一次,修改index.js后再次打包一次)。

这并不是我们想要的结果,虽然源代码hash改变解决了浏览器使用缓存版本的问题,但是,如果common.js的hash值也一同发生了变化的话,那么浏览器也还需要每次都请求不会发生改变的静态代码common,这样还是浪费了网络资源,很低效。

注:本案例会多次打包,dist目录中会生成过多垃圾文件,在实际使用中都使用了CleanWebpackPlugin插件。

new CleanWebpackPlugin(['dist']) // 加入在插件数组中,用于在每次打包前,都清空打包文件夹下之前打包的文件。

如果修改了index,仅仅只是生成的app的hash值发生变化,而common的hash值不发生变化,那就能够达到我们的目的,既能缓存库又能识别源文件的更改。
我们进行如下配置: output中将 [name].[hash].js 改为[name].[chunkhash].js ,让每个文件生成唯一的hash值:

const path = require('path');
const webpack = require('webpack');
 
module.exports = {
 entry: {
  common: ['lodash'],
  app: './src/index.js'
 },
 output: {
  filename: '[name].[chunkhash].js',
  path: path.resolve(__dirname, 'dist')
 },
 plugins: [
  new CleanWebpackPlugin(['dist']),
  new webpack.optimize.CommonsChunkPlugin({
   name: 'common' // 指代index.js引入的lodash库
  })
 ]
}

(注意:不要在开发环境下使用 [chunkhash],因为这会增加编译时间。将开发和生产模式的配置分开,并在开发模式中使用 [name].js 的文件名,在生产模式中使用 [name].[chunkhash].js 文件名,所以如果这个时候使用了热替换插HotModuleReplacementPlugin,将会导致编译不成功!)

我们配置好之后,进行webpack打包:

webpack进阶——缓存与独立打包的用法

chunkhash是根据文件内容生成的hash,可见app与common生成的hash值不相同了(对比使用 [name].[hash].js打包)。

我们在index.js中随便进行修改,再次打包:

webpack进阶——缓存与独立打包的用法

奇怪的是,虽然common与app生成了单独的hash值,但是修改了index.js,common的hash值还是发生了变化。

原因是:为了最小化生成的文件大小,webpack使用标识符而不是模块名称,在编译期间生成标识符,并映射到块文件名,然后放入一个名为chunk manifest的JS对象中。重点就在于!!当我们使用CommonsChunkPlugin分离代码时,被分离出来的代码(本文中的lodash库,被打包为common。),会默认被移动到entry中最后一个入口进行打包(第一个入口是index.js)。重要的是,chunk manifest将随着这些被分离出来的代码共同打包!!!

由于我们更改源代码后,不但会更新app的hash值,还会生成新的映射,然后新的映射又会和资源代码一同打包,又由于chunkhash是根据内容生成hash的,那么加入了新的映射对象chunk manifest的资源代码被打包后,hash自然也会发生改变。这反过来,产生的新hash将使长效缓存失效。

那么接下来我们需要做的就是讲 manifest分离出来。这里我们利用一个CommonsChunkPlugin一个较少有人知道的功能,能够在每次修改后的构建中将manifest提取出来,通过指定entry中未用到的名称,此插件会自动将我们需要的内容提取到单独的包中。

故再额外配置一个CommonsChunkPlugin:

const path = require('path');
const webpack = require('webpack');
 
module.exports = {
 entry: {
  common: ['lodash'],
  app: './src/index.js'
 },
 output: {
  filename: '[name].[chunkhash].js',
  path: path.resolve(__dirname, 'dist')
 },
 plugins: [
  new CleanWebpackPlugin(['dist']),
  new webpack.optimize.CommonsChunkPlugin({
   name: 'common' // 指代index.js引入的lodash库
  }),
  new webpack.optimize.CommonsChunkPlugin({
   name: 'manifest' // 用于提取manifest
  })
 ]
}

webpack打包后:

webpack进阶——缓存与独立打包的用法

从这里可以证明之前所说的manifest被打包进了common!!!仔细看之前的图:common的Size都是547kb,到这里common大小是541kb 而manifest大小正好为5.85kb,加起来正好为547kb。

然后我们修改index.js再次打包:

webpack进阶——缓存与独立打包的用法

从这里可以发现!!我们修改了源代码,common的hash值已经不再发生改变了!到这里可以达到我们不缓存源代码缓存资源文件的目的了。

但是可别高兴得太早!!我们做了一个很小的修改,交换了entry中 app 和 common的顺序(对比上一个代码段):

const path = require('path');
const webpack = require('webpack');
 
module.exports = {
 entry: {
  app: './src/index.js',
  common: ['lodash']
 },
 output: {
  filename: '[name].[chunkhash].js',
  path: path.resolve(__dirname, 'dist')
 },
 plugins: [
  new CleanWebpackPlugin(['dist']),
  new webpack.optimize.CommonsChunkPlugin({
   name: 'common' // 指代index.js引入的lodash库
  }),
  new webpack.optimize.CommonsChunkPlugin({
   name: 'manifest' // 用于提取manifest
  })
 ]
}

打包后:

webpack进阶——缓存与独立打包的用法

这里发现对比上一张图片发现,common的hash值又发生改变了!!而且根本没有更改index.js的内容app的hash也变了,只是换了一下顺序而已!

大家注意看本张图与上一张图的模块解析顺序([1],[2],[3]...之后所对应的模块)。发现上一张图,lodash第一个解析,而现在lodash最后一个解析。

这就是hash更变的原因:这是因为每个module.id 会基于默认的解析顺序(resolve order)进行增量。也就是说,当解析顺序发生变化,ID 也会随之改变,所以hash值也会发生变化。

有人可能会决定,一般我们都不会更换webpack.config.js中entry的入口顺序,那么是否我就不会遇见这个问题了。答案是否定的,除否你能保证资源文件都写在entry的顶部。否则会出现这样的情况:

假如entry的顺序为: app -> common, 那么解析顺序为 index.js → lodash。 如果之后index.js引入了 print.js,那么解析顺序变为 index.js → print.js -> lodash。

以上,我们并没有在entry中更改入口顺序,解析的顺序还是会发生改变,common的hash还是会发生,不能缓存。

这里我们就引入一个新的组件:HashedModuleIdsPlugin:根据hash生成ID(NamedModulesPlugin也具有同样的效果,但是是根据路径名生成ID,可读性更高,也由此编译时间会相对长一些)。 这样module.id就不会使用数字标识符,而使用hash:

const path = require('path');
const webpack = require('webpack');
 
module.exports = {
 entry: {
  common: ['lodash'],
  app: './src/index.js'
 },
 output: {
  filename: '[name].[chunkhash].js',
  path: path.resolve(__dirname, 'dist')
 },
 plugins: [
  new CleanWebpackPlugin(['dist']),
  new webpack.HashedModuleIdsPlugin(), // 引入该插件
  new webpack.optimize.CommonsChunkPlugin({
   name: 'common' // 指代index.js引入的lodash库
  }),
  new webpack.optimize.CommonsChunkPlugin({
   name: 'manifest' // 用于提取manifest
  })
 ]
}

打包发现,之前[ ]里都是数字,现在都是一些字符,

webpack进阶——缓存与独立打包的用法

接下来,我们再把app和common的顺序调换一下,并且随意修改index.js,再次打包:

webpack进阶——缓存与独立打包的用法

现在大功告成,common的hash没有改变,而因为更变了内容app的hash改变了,这正是我们想要的结果。

参考资料:

webpack文档 -- 缓存

webpack独立打包与缓存处理

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

Javascript 相关文章推荐
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
vue实现购物车的监听
Apr 20 Javascript
使用vue构建移动应用实战代码
Aug 02 #Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 #Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 #jQuery
ReactNative列表ListView的用法
Aug 02 #Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 #Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 #Javascript
easyui-datagrid开发实践(总结)
Aug 02 #Javascript
You might like
一步一步学习PHP(3) php 函数
2010/02/15 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
Python实现从URL地址提取文件名的方法
2015/05/15 Python
python随机取list中的元素方法
2018/04/08 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
Python 处理图片像素点的实例
2019/01/08 Python
python模拟斗地主发牌
2020/04/22 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
小学门卫岗位职责
2013/12/17 职场文书
原材料检验岗位职责
2014/03/15 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
场地使用证明模板
2014/10/25 职场文书
政协常委会议主持词
2015/07/03 职场文书