hooyantsing's Blog

P23 缓存

字数统计: 734阅读时长: 3 min
2020/12/01

尚硅谷2020最新版Webpack5实战教程

两种缓存

  • babel缓存:js兼容低版本浏览器相关的js文件,第二次打包速度更快
  • 文件资源缓存:解决用户浏览器第一次请求资源后,将缓存在用户本地。当资源文件需要更新时,及时让用户浏览器请求最新的资源文件。

编写配置文件

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
const { resolve } = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

process.env.NODE_ENV = 'production';

/*
两种缓存:
babel 缓存 --> 让第二次打包速度更快
cacheDirectory: true
文件资源缓存 --> 上线代码优化,多使用用户浏览器本地缓存,并且解决当服务端资源更新时,及时获取新版本的资源
hash: 每次webpack构建时会生成一个唯一的hash值
问题:因为js和css同时使用一个hash值,如果重新打包,会导致所有缓存失效。
chunkhash:根据chunk生成的hash值。如果打包来源同一个chunk,那么hash值就一样
问题:js和css的值还是一样的,因为css是在js中被引入的,所以同属于一个chunk
(推荐)contenthash:根据文件的内容生成hash值。不同文件hash值一定不一样。
*/

const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
];

module.exports = {
entry: './src/js/index.js',
output: {
// contenthash变化,表示js缓存更新
filename: 'js/built.[contenthash:10].js',
path: resolve(__dirname, 'build'),
publicPath:'./'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
oneOf: [
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'entry',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: "60",
ie: '9',
safari: '10',
edge: '17'
}
}
]
],
"plugins": ["@babel/plugin-transform-runtime"],
// 开启babel缓存
// 第二次构建时,会读取之前的缓存
cacheDirectory: true
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// contenthash变化,表示css缓存更新
filename: 'css/built.[contenthash:10].css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production',
devServer: {
contentBase: resolve(__dirname,'build'),
compress: true,
port: 3000
}
};

这里使用 nodejs 开启服务器。可以看到,使用js写的服务器开启了强制用户浏览器缓存资源,时效是1小时。

server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
服务器代码
启动服务器指令:
方式一:
npm i nodemon -g
nodemon server.js
方式二:
node server.js
*/

const express = require('express');

const app = express();

app.use(express.static('build', { maxAge: 1000 * 3600 }));

app.listen(3000);
CATALOG
  1. 1. 两种缓存
  2. 2. 编写配置文件