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 相关文章推荐
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
js cavans实现静态滚动弹幕
May 21 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP多进程编程实例
2014/10/15 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP7 新增常量
2021/03/09 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
法制教育演讲稿
2014/09/10 职场文书
入党函调证明材料
2014/12/24 职场文书
法律进社区活动总结
2015/05/07 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA
一文解答什么是MySQL的回表
2022/08/05 MySQL