一般要优化网站的加载速度可以从缓存入手,利用缓存可以降低网络流量,减少访问请求,从而可以达到加快访问速度的目的.
但是,如果一旦将文件缓存,那么有更新的时候就不能及时更新,若要看到最新内容,那么就需要清除缓存重新加载,这样加载速度就会很慢,达不到优化网站加载的目的。
解决的办法是添加版本号,也可以说是在文件名上加个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. Overture小课堂之如何演绎钢琴滑音

    在我们学习钢琴和学习使用Overture时,要学习如何弹奏和使用滑音.那么我们先来看看什么是滑音,如何使用钢琴演绎,在Overture里滑音又在哪里呢? 滑音,在音乐术语中通常指一种装饰音和演奏指法. ...

  2. Python模块 2

    collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型: 1.namedtuple: 生成可以使用名字来访问 ...

  3. line-height各类属性值

    line-height支持属性值 1.normal(默认属性) 跟着用户的浏览器走,且与元素字体关联 normal值 = 字体大小/100 2.<number> 使用数值作为行高值.如:l ...

  4. Django 中使用 Celery

    起步 在 <分布式任务队列Celery使用说明> 中介绍了在 Python 中使用 Celery 来实验异步任务和定时任务功能.本文介绍如何在 Django 中使用 Celery. 安装 ...

  5. linux 查看命令总结

    1.tail -f -n 200 cat.log 2.使用less命令 less all.2018092510.0.log 打开log文件,默认显示100行记录. 输入/CustGroupListSe ...

  6. selenium python 中浏览器操作

    1.启用浏览器 browser = webdriver.Chrome()               谷歌浏览器 browser = webdriver.Firefox()              ...

  7. JQuery Checkbox 获取多选值 Checkbox选中个数

    1.获取checkbox选中个数 $("input[name='ckb-jobid']:checked").length $("input[type='checkbox' ...

  8. python 写文本文件出现乱码

    最近工作中想完善一下监控日志,同事说客户突然说我们最近几天推送的数据只有几家,赶紧看预警,应推4700多家,实推3400多家,用户可能是看错了,但我记得当时项目验收上线时,这个来源的推送数据肯定是可以 ...

  9. Linux 缩减逻辑卷

    因工作需要,将/usr/users 空间从100G 缩小到50G 检查文件系统类型 mount | grep  /usr/users 发现该文件系统使用的是 xfs  ,逻辑卷为 /dev/appvg ...

  10. android -------- 沉浸式状态栏和沉浸式导航栏(ImmersionBar)

    android 4.4以上沉浸式状态栏和沉浸式导航栏管理,包括状态栏字体颜色,适用于Activity.Fragment.DialogFragment.Dialog,并且适配刘海屏,适配软键盘弹出等问题 ...