webpack独立打包和缓存处理详解


Posted in Javascript onApril 03, 2017

前言

先前写了一篇webpack入门的文章《webpack入门必知必会》,简单介绍了webpack拆分、打包、压缩的使用方法。本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法。

上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码:

var path = require('path');

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

在入口文件index.js中我们引入了jQuery:

// index.js
var $ = require('jquery');
var str = require('./hello.js');

function main() {
 $('body').html(str);
}

main();

这样我们虽然能够实现代码的统一打包,将jQuery、index.js、hello.js统统打包到了bundle.js里,但是会存在一个问题:每次打包都会生成一个体积较大的新bundle.js,浏览器无法缓存像jQuery这样的基本不会改动的框架库代码文件,影响加载速度。

发现问题我们就来解决问题,我们最终希望的是将像jQuery这样的框架库代码与项目自身的代码分开打包,生成一个独立的打包文件,缩减单个文件体积,浏览器也不用每次都进行加载。

步骤

1、独立打包

为了解决上述问题,我们需要修改我们的webpack配置文件:

var webpack = require('webpack');
var path = require('path');

module.exports = {
 entry: {
  main: './app/index.js',
  vendor: ['jquery']
 },
 output: {
  filename: '[name].js',
  path: path.resolve(__dirname, 'dist')
 },
 plugins:[
  new webpack.optimize.CommonsChunkPlugin({
   name: 'vendor'
  }),
 ]
}

上方我们将原本的单入口文件改成了多入口文件,并加入了vendor属性。vendor属性用于配置打包第三方类库,写入数组的类库名将统一打包到一个文件里。

同时我们将输出的filename用[name]变量来自动生成文件名,最后我们添加了一个CommonsChunkPlugin的插件,用于提取vendor。

配置完成后我们运行webpack命令:

Hash: ee1daf95c1986768927a
Version: webpack 2.3.2
Time: 573ms
  Asset  Size Chunks     Chunk Names
  main.js 340 bytes  0 [emitted]   main
vendor.js  274 kB  1 [emitted] [big] vendor
 [0] ./~/jquery/dist/jquery.js 267 kB {1} [built]
 [1] ./app/hello.js 53 bytes {0} [built]
 [2] ./app/index.js 114 bytes {0} [built]
 [3] multi jquery 28 bytes {1} [built]

最终发现我们成功将jQuery打包到了vendor.js中,实现了独立打包,但是问题又来了:每次打包后生成的文件名都是一样的,浏览器可能缓存上一次的结果而无法加载最新数据。

2、添加hash

为了解决上述问题,我们需要为打包后的文件名添加hash值,这样每次修改后打包的文件hash值将改变,修改配置文件如下:

module.exports = {
 ...
  output: {
   filename: '[name].[chunkHash:5].js',
   path: path.resolve(__dirname, 'dist')
  },
 ...
}

上方我们在输出文件名中增加了[chunkHash:5]变量,表示打包后的文件中加入保留5位的hash值。我们再次运行打包命令:

Hash: c7d1295f2f9a27c412d2
Version: webpack 2.3.2
Time: 603ms
   Asset  Size Chunks     Chunk Names
 main.2a7ad.js 337 bytes  0 [emitted]   main
vendor.49eb4.js  274 kB  1 [emitted] [big] vendor
 [0] ./~/jquery/dist/jquery.js 267 kB {1} [built]
 [1] ./app/hello.js 50 bytes {0} [built]
 [2] ./app/index.js 114 bytes {0} [built]
 [3] multi jquery 28 bytes {1} [built]

上方我们发现打包后的文件成功加上了hash值,这样每次修改文件后hash值也会跟着变,就不怕浏览器缓存了,但是当我们尝试去修改一个js文件后再次打包,问题又来了:vendor.js的hash值也变了,我们并没有修改jQuery的源码。

3、修改vendor配置

上述问题产生的原因是因为CommonsChunkPlugin插件是用于提取公共代码的,上方我们只是提取了vendor作为公共代码。为了继续解决上述问题,其实方法很简单,我们需要修改CommonsChunkPlugin的配置,如下:

module.exports = {
 ...
  plugins:[
   new webpack.optimize.CommonsChunkPlugin({
    names: ['vendor', 'manifest']
   }),
  ]
 ...
}

如此我们修改一下hello.js中的代码,发现vendor的hash值并未改变,并且多了一个manifest.js的小文件。manifest.js为webpack的启动文件代码,它会直接影响到hash值,用mainfest单独抽出来了,这样vendor的hash就不会变了。

4、生成index.html

通过以上对webpack配置文件的一系列修改,我们成功实现了webpack的独立打包与缓存处理,但是还差最后一步。

因为我们最终打包后生成的文件名中带有hash值,每次都是会变的,所以我们不能像目前这样在index.html中写死路径。

index.html

...
<body>
 <script src="./dist/main.js"></script>
 <script src="./dist/vendor.js"></script>
 <script src="./dist/manifest.js"></script>
</body>
...

以上写法是不对的,因为缺少了可变的hash值,因此我们希望每次打包后index.html中的路径也会自动加上hash值,解决方法如下:

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 ...
  plugins:[
   ...
   new HtmlWebpackPlugin({
    title: 'demo',
    template: 'index.html' // 模板路径
   }),
   ...
  ]
 ...
}

上方我们引入了html-webpack-plugin这一个插件,该插件可以帮助我们根据模板生成html文件。在plugins设置中,title配置了生成html中的title部分,template为模板html的路径地址。

我们需要下载html-webpack-plugin:

npm install html-webpack-plugin --save-dev

安装和配置完毕后,运行打包命令:webpack

Hash: 0c4b91e206579b31544d
Version: webpack 2.3.2
Time: 856ms
   Asset  Size Chunks     Chunk Names
 vendor.e1868.js  268 kB  0 [emitted] [big] vendor
 main.44412.js 337 bytes  1 [emitted]   main
manifest.ed186.js 5.81 kB  2 [emitted]   manifest
  index.html 292 bytes   [emitted]
 [0] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [1] ./app/hello.js 50 bytes {1} [built]
 [2] ./app/index.js 114 bytes {1} [built]
 [3] multi jquery 28 bytes {0} [built]

我们发现在dist目录下生成了一个index.html文件,打开该文件后代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>demo</title>
</head>
<body>
<script type="text/javascript" src="manifest.ed186.js"></script>
<script type="text/javascript" src="vendor.e1868.js"></script>
<script type="text/javascript" src="main.44412.js"></script>
</body>
</html>

至此我们实现了每次打包后index.html中的路径也会自动加上hash值的功能,因此dist目录下的index.html即为以后的首页文件,最后我们在浏览器中打开该文件成功显示:

webpack独立打包和缓存处理详解

结语

本文在webpack入门的基础上讲解了webpack独立打包与缓存处理的方式

实例代码已上传我的github,地址为:https://github.com/luozhihao/webpack-course/tree/master/vendor, 供参考。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 #jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 #jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 #jQuery
JS异步文件上传(兼容IE8+)
Apr 02 #Javascript
使用canvas及js简单生成验证码方法
Apr 02 #Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 #jQuery
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 #Javascript
You might like
一个程序下载的管理程序(二)
2006/10/09 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
python基础教程项目二之画幅好画
2018/04/02 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
中国好声音华少广告词
2014/03/17 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
先进党员事迹材料
2014/12/24 职场文书
员工辞职信范文大全
2015/05/12 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python