CommonsChunkPlugin并不是分离第三方库的好办法(DllPlugin科学利用浏览器缓存)
webpack算是个磨人的小妖精了。之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下。本来只想玩一下的。尝试打包了以后,就想启个webpack服务器,之后就想添加热替换,什么css文件单独拆分,各种 loader 处理优化打包结果,各种 source-map 有什么不同,一个都不能少。其中添加热替换时候,因为应用的服务器和webpack服务器没有使用同一个,产生了一点波折。然后就到了今天这个主题了。
逐步展开今天的主题:
为什么要分离第三方库?
这个好处显而易见,第三方库是比较稳定的,不会轻易改变,利用浏览器缓存后,用户再次加载页面会减少服务器请求,提高速度优化体验。提取多个应用(入口)公共模块的作用和他类似,公共部分会被缓存,所有应用都可以利用缓存内容从而提高性能。
分离第三方库就能利用浏览器换缓存了么?
同样显而易见是否定的,导致无法利用缓存的因素有很多,比如最明显的有可能你每次分离的库文件重新打包都会得到不同的名称,这个比较容易发现,再比如说后台的同事给js文件设置的缓存过期时间为0,这就尴尬了,但0就不能利用缓存了么?并不是,只要文件是完全不变的,注意是完全不变,包括修改时间,依然会利用缓存,性能飞起。想利用缓存必须先了解缓存,这里简单提一下:
浏览器缓存机制是什么样的?
HTTP1.1给的策略是使用Cache-control配合Etag,
Cache-control设置举例:
'Cache-Control': 'public, max-age=600',
max-age即过期时间,如果已过期的话,还会查看Etag,
ETag的值:
Apache中,ETag的值默认是对文件的索引节(INode),大小(Size)和最后修改时间(MTime)进行Hash后得到的。
如果Etag相同,依然不会请求新资源,而会使用以前的文件。
CommonsChunkPlugin 到底是用来干什么的?
字面理解,提取公共包,公共包那就是不只一个地方使用喽,单页应用(单入口)的库只有他自己使用,不能算公共包吧?这个插件提取的公共包,每次是会重新打包的(Etag会不同),无论是节约打包时间,(虽然微不足道的时间但毕竟是无用功:库根本没变么),还是对浏览器缓存的利用(万一 max-age 过期了你就放弃缓存了么?)都不是好的方案。最佳方案浮出水面:DllPlugin
DllPlugin有什么优势?
只对库文件打包一次。也就是说,只要库文件不变,只需要打包一次,以后再打包业务代码和库文件没关系啦,这样一来真正做到了库文件永远是那个库文件,只要库文件不变,缓存永远有效(Etag不变),打起包来把库丢到脑后,神清气爽。介绍一下最简单的使用方式:
首先另写一个 webpack 配置文件,毕竟是单独打包库了,假设 webpack.config.dll.js
const path = require('path')
const webpack = require('webpack');
module.exports = {
entry: {
vendor: ['react', 'react-dom', 'react-hot-loader', 'immutable', 'redux', 'react-redux', 'react-router-dom', 'redux-logger',
'redux-persist', 'redux-persist-transform-immutable', 'redux-thunk'],
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'public'),
library: '[name]', // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下,注意与DllPlugin的name参数保持一致
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(__dirname, 'public/manifest.json'), // 本Dll文件中各模块的索引,供DllReferencePlugin读取使用
name: '[name]',
}),
],
}
在原来的配置文件中添加 DllReferencePlugin 插件
new webpack.DllReferencePlugin({
manifest: require('./public/manifest.json'), // 指定manifest.json
name: 'vendor', // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下,注意与DllPlugin的name参数保持一致
}),
终端先运行:
webpack -p --progress --config ./webpack.config.dll.js
把库文件先打个包,只要库不变,以后就用这个包了,再打包业务代码,完活。
推荐策略:
各行其是。
如果是单页应用,那只用DllPlugin打包库文件即可,业务代码一个包搞定。
如果是多页应用,DllPlugin打包完库文件,开发时可能会用很多公共的业务代码而且可能随时变动,这就要利用CommonsChunkPlugin来做他本该做的事,再把公共业务提取出来,至于缓存,起码在页面间切换时,公共部分还是会被缓存的。
CommonsChunkPlugin并不是分离第三方库的好办法(DllPlugin科学利用浏览器缓存)的更多相关文章
- webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存)
webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启 ...
- pycharm每次新建项目都要重新安装一些第三方库的解决办法(转载防删)
目前有三个解决办法,也是亲测有用的: 第一个方法:因为之前有通过pycharm的project interpreter里的+号添加过一些库,但添加的库只是指定的项目用的,如果想要用,就必须用之前的项目 ...
- pycharm安装第三方库失败解决办法
一.报错信息:[file][Default Settint]---Project Interpreter 点击 搜索suds安装模块报错 解决:依据上图提示找到C:\Program Files\Jet ...
- cocoapods导入第三方库后,xcode上import不提示,找不到第三方库的解决办法
选择你的工程tagets, -> Build Settings -> Search Paths -> User Header Search Paths 双击User Header S ...
- webpack 的第三方库分离并持久化缓存
我们常常需要在浏览器缓存一些稳定的资源,如第三方库等.要达到这个目标,只需要两步: 1.提取出“稳定的资源”: 2.提供稳定的文件hash . 处理后的出的文件就像这样子: app.1w3ad4q4. ...
- Python 标准库、第三方库
Python 标准库.第三方库 Python数据工具箱涵盖从数据源到数据可视化的完整流程中涉及到的常用库.函数和外部工具.其中既有Python内置函数和标准库,又有第三方库和工具.这些库可用于文件读写 ...
- 运用NodeJs环境并依赖第三方库,框架等实现网站前后端分离报错问题及处理方法
运用NodeJs环境并依赖第三方库,框架等实现网站前后端分离报错问题及处理方法 问题一: SyntaxError: missing ) after argument list in .....\vie ...
- iOS程序开发引用的第三方库之间出现duplicate symbol时的处理方法
iOS程序集成的第三方库过多时,很容易出现某几个库同时用到了一样的函数库,也就是在你的程序link时会提示duplicate symbol,而重复的符号又不是由你自己程序的代码造成的,也就说没法通过直 ...
- iOS开发常用第三方库
UI 动画 网络相关 Model 其他 数据库 缓存处理 PDF 图像浏览及处理 摄像照相视频音频处理 响应式框架 消息相关 版本新API的Demo 代码安全与密码 测试及调试 AppleWatch ...
随机推荐
- CF #365 703D. Mishka and Interesting sum
题目描述 D. Mishka and Interesting sum的意思就是给出一个数组,以及若干询问,每次询问某个区间[L, R]之间所有出现过偶数次的数字的异或和. 这个东西乍看很像是经典问题, ...
- 【WPF】学习笔记(二)——依旧是一个电子签名板
这篇博客呢,主要谈谈在实现电子签名功能中踩过的几个坑:1.System.BadImageFormatException异常:2.无法加载DLL“###.dll”,: 找不到指定的模块. (异常来自 H ...
- 蓝桥杯-四平方和-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- linux 内核的另一个自旋锁 - 读写锁
除spinlock外,linux 内核还有一个自旋锁,名为arch_rwlock_t.它的头文件是qrwlock.h,包含在spinlock.h,头文件中对它全称为"Queue read/w ...
- Excel 数据导出
Web controller /// <summary> /// 导出数据 /// </summary> /// <param name="UserID&qu ...
- 用ajax判断用户是否已存在?----2017-05-12
首先在用ajax之前,先说一下JSON: JSON:javascript object notation js对象标记 对于json,我们只需要知道如何定义json?如何输出?怎么遍历? 1.定义 ...
- hadoop配置文件的作用
core-site.xml <property> //指定hdfs的主端口 namenode要放在哪台机器上 <name>fs.defaultFS</name> & ...
- Java 通过先序后序序列生成二叉树
题目 二叉树的前序以及后续序列,以空格间隔每个元素,重构二叉树,最后输出二叉树的三种遍历方式的序列以验证. 输入: 1 2 3 4 5 6 7 8 9 10 3 2 5 4 1 7 8 6 10 9 ...
- 读 Zepto 源码之神奇的 $
经过前面三章的铺垫,这篇终于写到了戏肉.在用 zepto 时,肯定离不开这个神奇的 $ 符号,这篇文章将会看看 zepto 是如何实现 $ 的. 读Zepto源码系列文章已经放到了github上,欢迎 ...
- 使用函数指针调用C++虚函数
基本概念: 1. 函数指针,一个地址指针变量,其值指向代码区的某个函数首地址. 2. 虚函数,可以被子类覆写的C++成员函数.由虚函数表实现. 3. 虚函数表指针(vpt),指向虚函数表首地址的指针, ...