一般要优化网站的加载速度可以从缓存入手,利用缓存可以降低网络流量,减少访问请求,从而可以达到加快访问速度的目的.
但是,如果一旦将文件缓存,那么有更新的时候就不能及时更新,若要看到最新内容,那么就需要清除缓存重新加载,这样加载速度就会很慢,达不到优化网站加载的目的。
解决的办法是添加版本号,也可以说是在文件名上加个hash值,如果有更改的文件,那么hash值就会有变化,没有更改的文件,文件名就不变。有更新的时候就会加载最新更改的文件,其他没变动的文件就利用缓存减少没必要的加载,这样就可以优化加载速度。


webpack中可以在output的filename输出文件名中规定文件名带hash值打包:

output:{
filename: '[name]-[chunkhash:5].bundle.js',
path: path.resolve(__dirname,'dist')
}

需要注意的是,这里可以选hashchunkhash,它们的使用范畴:

  • hash

    1. 使用 hash 对js和css进行签名时,每一次hash值都不一样,导致无法利用缓存
    2. 原因是因为, hash 字段是根据每次编译compilation的内容计算所得,也可以理解为项目总体文件的hash值,而不是针对每个具体文件的。(所以每一次编译都会有一个新的hash,并不适用)
    3. 解决:不用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-缓存的更多相关文章

  1. webpack学习笔记—优化缓存、合并、懒加载等

    除了前面的webpack基本配置,还可以进一步添加配置,优化合并文件,加快编译速度.下面是生产环境配置文件webpack.production.js,与wenbpack.config.js相比其不需要 ...

  2. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  3. MVC缓存OutPutCache学习笔记 (二) 缓存及时化VaryByCustom

    <MVC缓存OutPutCache学习笔记 (一) 参数配置> 本篇来介绍如何使用 VaryByCustom参数来实现缓存的及时化.. 根据数据改变来及时使客户端缓存过期并更新.. 首先更 ...

  4. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  5. 更博不能忘——webpack学习笔记

    webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...

  6. webpack学习笔记(二)-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  7. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  8. Webpack 学习笔记总结

    Webpack安装 Linux系统默认已经安装了node&npm,但版本比较低,而且没法升级,可以重新下载Node然后通过软链接替换系统自带的node和npm; ln -s /path_to/ ...

  9. Webpack学习笔记一:What is webpack

      #,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...

  10. webpack学习笔记一(入门)

    webpack集成了模块加载和打包等功能 ,这两年在前端领域越来越受欢迎.平时一般是用requirejs.seajs作为模块加载用,用grunt/gulp作为前端构建.webpack作为模块化加载兼容 ...

随机推荐

  1. bzoj 4767 两双手 - 动态规划 - 容斥原理

    题目传送门 传送门I 传送门II 题目大意 一个无限大的棋盘上有一只马,设马在某个时刻的位置为$(x, y)$, 每次移动可以将马移动到$(x + A_x, y + A_y)$或者$(x + B_x, ...

  2. 2018年-2019年第二学期第六周C#学习个人总结

    在这一周,我学习了5.4抽象类和接口.首先,抽象类当中我知道了C#允许在定义方法时不写方法体,不包含方法体的方法为抽象方法,抽象方法必须使用abstract关键字来修饰例如:abstract void ...

  3. writeup

    ``` #签到题``` 请打开微信关注,发送give me flag,即可获得.```Encode````1.ACSCLL首先看到这类题,我们肯定是要使用ASCLL的(这么明显的提示大家肯定一眼就能看 ...

  4. 二、Python数据类型(一)

    一.Python的基本输入与输出语句 (一)输出语句 print() 示例: print('你好,Python') print(4+5) a = 10 print(a) 输出的内容可以是字符串,变量, ...

  5. C# 封装SDK 获取摄像头的水平角度和垂直角度

    最近需要做一个C#版本的控制终端,控制摄像头,获取摄像头的水平角度和垂直角度 获取当前摄像头的角度,需要调用一个名为NET_DVR_GetDVRConfig的bool类型的函数 在C++中,函数定义: ...

  6. vim实现实时自动保存

    进https://www.vim.org/scripts/script.php?script_id=4521网站下载vim -auto-save wget  https://www.vim.org/s ...

  7. java native用法

    说明: native关键字说明其修饰的方法是一个原生态方法,方法对应的实现不是在当前文件,而是在用其他语言(如C和C++)实现的文件中.Java语言本身不能对操作系统底层进行访问和操作,但是可以通过J ...

  8. linux基础16-bash编程(case语句及脚本选项 )

    (1) case语句:选择结构 case SWITCH in value1) statement ... ;; //双分号结尾. value2) statement ... ;; *) stateme ...

  9. PyQt5——布局管理

    PyQt5布局管理使用方法详见:https://blog.csdn.net/jia666666/article/list/3?t=1& PyQt5布局管理汇总: 1.QHBoxLayout 2 ...

  10. kali linux 无线网络显示 wireless is disabled

    试了 rfkill , iwconfig , ifconfig , airmon-ng airodump-ng , 都显示,硬件是绝对没有问题了. 连 各种ap 都显示出来了. 最后google 之后 ...