【webpack学习笔记】a08-缓存
一般要优化网站的加载速度可以从缓存入手,利用缓存可以降低网络流量,减少访问请求,从而可以达到加快访问速度的目的.
但是,如果一旦将文件缓存,那么有更新的时候就不能及时更新,若要看到最新内容,那么就需要清除缓存重新加载,这样加载速度就会很慢,达不到优化网站加载的目的。
解决的办法是添加版本号,也可以说是在文件名上加个hash值,如果有更改的文件,那么hash值就会有变化,没有更改的文件,文件名就不变。有更新的时候就会加载最新更改的文件,其他没变动的文件就利用缓存减少没必要的加载,这样就可以优化加载速度。
webpack中可以在output的filename输出文件名中规定文件名带hash值打包:
output:{
filename: '[name]-[chunkhash:5].bundle.js',
path: path.resolve(__dirname,'dist')
}
需要注意的是,这里可以选hash
和chunkhash
,它们的使用范畴:
- hash
- 使用 hash 对js和css进行签名时,每一次hash值都不一样,导致无法利用缓存
- 原因是因为, hash 字段是根据每次编译compilation的内容计算所得,也可以理解为项目总体文件的hash值,而不是针对每个具体文件的。(所以每一次编译都会有一个新的hash,并不适用)
- 解决:不用hash,而用 chunkhash (js和css要使用chunkhash), chunkhash 的话每一个js的模块对应的值是不同的(根据js里的不同内容进行生成)
- chunkhash
chunkhash
只试用与js和css文件,在图片和字体资源中,chunkhash会报错。
然后就是提取模板:大多数时候,我们如果要更新修改只会更新我们的业务逻辑文件,比如jq/bootstrap等库我们其实并不会修改。那么我们就可以把这些第三方库另外打包。
完整例子:
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
index: './src/index.js'
},
devtool:'source-map',
plugins:[
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title:'Caching',
template:'./src/index.html'
})
],
optimization:{
splitChunks: {
cacheGroups: {
commons: {
chunks: 'initial',
minChunks:2,
name: 'commons'
},
'vendor':{
test: /lodash/,
chunks: "initial",
name: "vendor",
enforce: true
}
}
}
},
output:{
filename: '[name]-[chunkhash:5].bundle.js',
path: path.resolve(__dirname,'dist')
}
}
index.js
import _ from 'lodash';
import Print from './print';
function component(){
var element = document.createElement('div');
element.innerHTML = _.join(['Hello','2019~'], '--');
element.onclick = Print.bind(null, 'hello 25! come on!!')
return element;
}
document.body.appendChild(component());
print.js
export default function print(text){
console.log(text);
}
最后输出项目结构:
这里有需要注意的是,提取模板和分离代码这块,在官方文档中用的是CommonsChunkPlugin
插件,但这个插件在webpack4版本中已经被废弃,可用optimization.splitChunks
代替。
具体用法可参照官方文档中插件介绍,和网上的一篇资料有详细记载:
https://juejin.im/post/5af1677c6fb9a07ab508dabb
【webpack学习笔记】a08-缓存的更多相关文章
- webpack学习笔记—优化缓存、合并、懒加载等
除了前面的webpack基本配置,还可以进一步添加配置,优化合并文件,加快编译速度.下面是生产环境配置文件webpack.production.js,与wenbpack.config.js相比其不需要 ...
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- MVC缓存OutPutCache学习笔记 (二) 缓存及时化VaryByCustom
<MVC缓存OutPutCache学习笔记 (一) 参数配置> 本篇来介绍如何使用 VaryByCustom参数来实现缓存的及时化.. 根据数据改变来及时使客户端缓存过期并更新.. 首先更 ...
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- 更博不能忘——webpack学习笔记
webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...
- webpack学习笔记(二)-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- Webpack 学习笔记总结
Webpack安装 Linux系统默认已经安装了node&npm,但版本比较低,而且没法升级,可以重新下载Node然后通过软链接替换系统自带的node和npm; ln -s /path_to/ ...
- Webpack学习笔记一:What is webpack
#,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...
- webpack学习笔记一(入门)
webpack集成了模块加载和打包等功能 ,这两年在前端领域越来越受欢迎.平时一般是用requirejs.seajs作为模块加载用,用grunt/gulp作为前端构建.webpack作为模块化加载兼容 ...
随机推荐
- bzoj 4767 两双手 - 动态规划 - 容斥原理
题目传送门 传送门I 传送门II 题目大意 一个无限大的棋盘上有一只马,设马在某个时刻的位置为$(x, y)$, 每次移动可以将马移动到$(x + A_x, y + A_y)$或者$(x + B_x, ...
- 2018年-2019年第二学期第六周C#学习个人总结
在这一周,我学习了5.4抽象类和接口.首先,抽象类当中我知道了C#允许在定义方法时不写方法体,不包含方法体的方法为抽象方法,抽象方法必须使用abstract关键字来修饰例如:abstract void ...
- writeup
``` #签到题``` 请打开微信关注,发送give me flag,即可获得.```Encode````1.ACSCLL首先看到这类题,我们肯定是要使用ASCLL的(这么明显的提示大家肯定一眼就能看 ...
- 二、Python数据类型(一)
一.Python的基本输入与输出语句 (一)输出语句 print() 示例: print('你好,Python') print(4+5) a = 10 print(a) 输出的内容可以是字符串,变量, ...
- C# 封装SDK 获取摄像头的水平角度和垂直角度
最近需要做一个C#版本的控制终端,控制摄像头,获取摄像头的水平角度和垂直角度 获取当前摄像头的角度,需要调用一个名为NET_DVR_GetDVRConfig的bool类型的函数 在C++中,函数定义: ...
- vim实现实时自动保存
进https://www.vim.org/scripts/script.php?script_id=4521网站下载vim -auto-save wget https://www.vim.org/s ...
- java native用法
说明: native关键字说明其修饰的方法是一个原生态方法,方法对应的实现不是在当前文件,而是在用其他语言(如C和C++)实现的文件中.Java语言本身不能对操作系统底层进行访问和操作,但是可以通过J ...
- linux基础16-bash编程(case语句及脚本选项 )
(1) case语句:选择结构 case SWITCH in value1) statement ... ;; //双分号结尾. value2) statement ... ;; *) stateme ...
- PyQt5——布局管理
PyQt5布局管理使用方法详见:https://blog.csdn.net/jia666666/article/list/3?t=1& PyQt5布局管理汇总: 1.QHBoxLayout 2 ...
- kali linux 无线网络显示 wireless is disabled
试了 rfkill , iwconfig , ifconfig , airmon-ng airodump-ng , 都显示,硬件是绝对没有问题了. 连 各种ap 都显示出来了. 最后google 之后 ...