webpack 中文官网还没有更新,webpack.optimize.CommonsChunkPlugin已经不再用。更换为config.optimization.splitChunks。
关于几点概念,自己的理解。
manifest: wepack 解析 import export ,转换为 __webpack_require__方法
Runtime: runtime会根据 manifest检索出背后对应的模块,这里面还包括在模块交互时,连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接,以及懒加载模块的执行逻辑。
vendors:你的源码会依赖的任何第三方的 library 或 “vendor” 代码。也就是第三方库文件。
当配置如下时,会打包一个 js 文件。
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: {
app: './src/index.js',
// print: './src/print.js'
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
}
而缓存这一节,主要是从打包一个 js 文件里提取出Runtime,以及vendors。因为一般更改的主要的逻辑代码,这两部分更改的不多,特别是vendors。这样做可以使浏览器加载速度更快,不再重新下载未改过的文件。
在配置文件里增加两个东西:
1、optimization.runtimeChunk,这个可以做到把runtime,vendors 提取出来,做到代码分离。
2、webpack.HashedModuleIdsPlugin插件,使用这个插件可以使,vendor的 hash 值不变。
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: {
app: './src/index.js',
// print: './src/print.js'
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist')
},
+ optimization: {
+ runtimeChunk: 'single',
+ splitChunks: {
+ cacheGroups: {
+ vendor: {
+ test: /[\\/]node_modules[\\/]/,
+ name: 'vendors',
+ chunks: 'all'
+ }
+}
+}
+},
plugins: [
+ new webpack.HashedModuleIdsPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
}
运行命令npm run build,查看结果。
Built at: 08/15/2019 11:33:37 AM
Asset Size Chunks Chunk Names
app.26d4bfd00f0dc1834ba9.js 450 bytes 0 [emitted] app
index.html 362 bytes [emitted]
runtime.3964ebb6f53a392eb988.js 1.46 KiB 1 [emitted] runtime
vendors.fe5b987e58f49faa402a.js 69.7 KiB 2 [emitted] vendors
修改 src 目录下,index.js、或者 print.js 的逻辑。再次运行 build,发现只有app.26d4bfd00f0dc1834ba9.js 的 hash 变了,另外两个runtime.3964ebb6f53a392eb988.js、vendors.fe5b987e58f49faa402a.js 的 hash 值没有变化。
例子链接:/缓存/demo16/