webpack——webpack与浏览器缓存(十六)

调整项目

项目结构:

src/index.js

import _ from 'lodash'
import $ from 'jquery'const dom = $('<div>')
dom.html(_.join(['yang', 'yue', 'dingli'], ' '))
$('body').append(dom)

webpack.common.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {entry: {app: './src/index.js',// lodash: './src/lodash.js'},output: {filename: '[name].bundle.js',  //入口文件走这里chunkFilename: '[name].chunk.js',  //  间接生成的文件走这里path: path.resolve(__dirname, '../dist'),//publicPath也会在服务器脚本用到,确保资源能够在 http://localhost:3000下正确访问// publicPath: '/'  //在正常没有启用web服务器时记得去掉},plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new CleanWebpackPlugin(),  //不需要修改],//代码分割: webpack在处理公用内库的时候,会自动把库打包成单独一个文件,业务逻辑再打包成一个文件optimization: {//在使用MiniCssExtractPlugin时,从dev放到这里usedExports: true, // 1.splitChunks : 参考链接: https://www.webpackjs.com/plugins/split-chunks-plugin/splitChunks: {chunks: 'all',//添加的配置项cacheGroups: {vendors: {  test: /[\\/]node_modules[\\/]/,  priority: -10,filename: 'vendors.js' },}},}
}

webpack.prod.js

const commonConfig = require('./webpack.common.js')
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require("mini-css-extract-plugin") //生产环境下使用
const prodConfig = {mode: 'production',  //有Tree Shaking功能,不需要配置项,但要修改devtool: cheap-module-source-map// devtool: 'cheap-module-source-map',plugins: [new MiniCssExtractPlugin({filename: '[name].css', //直接被页面引用走这里chunkFilename: '[name].chunk.css'})],module: {rules: [{test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',  //babel-loader:babel和webpack中间的桥梁options: {"presets": [[//es6=>es5"@babel/preset-env", {"targets": {// "edge": "17",// "firefox": "60",// "chrome": "67","safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5},"corejs": '2',  //解决警告:  We noticed you're using the `useBuiltIns` option without declaring a core-js versionuseBuiltIns: 'usage'  }],"@babel/preset-react", //转化react代码],// plugins: ["dynamic-import-webpack"]  //用于异步模块代码分割,该插件不支持魔法注释,在添加注释时应到package.json中删除它plugins: ["@babel/plugin-syntax-dynamic-import"]  //使用官方插件,参考链接: https://www.babeljs.cn/docs/babel-plugin-syntax-dynamic-import}},{test:/\.css$/,use: [// 'style-loader',MiniCssExtractPlugin.loader,  //要使用插件提供的loader 替换掉style-loader //然后打包生成线上代码npm run build'css-loader']},]},
}
module.exports = merge(commonConfig, prodConfig)

webpack.dev.js

const webpack = require('webpack')
const merge = require('webpack-merge') //先安装: npm i webpack-merge --save-dev
const commonConfig = require('./webpack.common.js')
const devConfig = {mode: 'development', //默认没有Tree Shaking功能, devtool: cheap-module-eval-source-mapdevtool: 'cheap-module-eval-source-map',devServer: {contentBase: './dist',open: true,port: 8080,hot: true,// hotOnly: true //去掉后更改会自动刷新页面},module: {rules: [{test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',  //babel-loader:babel和webpack中间的桥梁options: {"presets": [[//es6=>es5"@babel/preset-env", {"targets": {// "edge": "17",// "firefox": "60",// "chrome": "67","safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5},"corejs": '2',  //解决警告:  We noticed you're using the `useBuiltIns` option without declaring a core-js versionuseBuiltIns: 'usage'  }],"@babel/preset-react", //转化react代码],// plugins: ["dynamic-import-webpack"]  //用于异步模块代码分割,该插件不支持魔法注释,在添加注释时应到package.json中删除它plugins: ["@babel/plugin-syntax-dynamic-import"]  //使用官方插件,参考链接: https://www.babeljs.cn/docs/babel-plugin-syntax-dynamic-import}},{test:/\.css$/,use: ['style-loader','css-loader']},]},plugins: [new webpack.HotModuleReplacementPlugin() //要先引入webpack,是webpack自带的插件],//Tree Shaking配置项//在使用MiniCssExtractPlugin时,引入css文件没有使用没有输出,会被摇晃树摇晃掉,需要在package.json配置sideEffects// optimization: {//     usedExports: true// }
}module.exports = merge(commonConfig, devConfig)

运行npm run build,生成打包文件:

contenthash

因为第一次访问,浏览器会缓存资源,而如果修改了页面内容再次访问时,存在缓存中的文件名没有变,则拿到的依然是缓存中的资源,导致出错
解决办法: 引入contenthash
webpack.common.js

output: {path: path.resolve(__dirname, '../dist'),},
//...
splitChunks: {chunks: 'all',//添加的配置项cacheGroups: {vendors: {  test: /[\\/]node_modules[\\/]/,  priority: -10,// filename: 'vendors.js' },}},

webpack.dev.js

output: {filename: '[name].js',  //入口文件走这里chunkFilename: '[name].js',  //  间接生成的文件走这里},

webpack.prod.js

//[contenthash] 内容改变值就改变output: {filename: '[name].[contenthash].js',  //入口文件走这里chunkFilename: '[name].[contenthash].js',  //  间接生成的文件走这里},

再次打包npm run build:

修改index.js中内容,再次打包npm run build:

业务代码变化,对应的hash值跟着变化
而vendor中放置的是jquery和lodash代码,没有改动, hash值不变

总结: 通过使用contenthash打包代码上线时, 只需要更新有变化的代码,没有变化的代码则用本地缓存

webpack——webpack与浏览器缓存(十六)相关推荐

webpack优化篇（四十六）：充分利用缓存提升二次构建速度
说明玩转 webpack 学习笔记缓存目的:提升二次构建速度缓存思路: babel-loader 开启缓存 terser-webpack-plugin 开启缓存使用 cache-loader ...
[转]ASP.NET 缓存(十六)--检索缓存项的值
从 Cache 中检索数据很简单,只需指定表示数据的键和值.然后,编写代码以在页上显示该数据. 检索缓存项的值以下代码创建一个 Source DataView 对象,尝试检索分配了键 MyData1 ...
浏览器缓存和webpack缓存配置
网络请求会耗费大量时间和请求,如果可以重用为改变的网络资源,对于用户来说可以更快更流畅的查看网页,对于服务器来说减少了很多负荷,所以浏览器缓存是前端优化的重要内容.本文介绍了浏览器缓存的机制和缓存在w ...
写入缓存策略无法更改_【第1747期】webpack 5 之持久化缓存指南
前言在TLC大前端信息流会上,@TheLarkInn分享了[PPT]the road to webpack 5.今日早读文章由苏宁@QC-L翻译授权分享. @QC-L,目前就职于苏宁.印记中文成员之 ...
html打包成app的缓存问题,webpack 独立打包与缓存处理
关于微信公众号:前端呼啦圈(Love-FED) 个人博客:劳卜的博客知乎专栏:前端呼啦圈前言先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpa ...
【Python】【进阶篇】十六、Python爬虫的浏览器实现抓包
目录十六.Python爬虫的浏览器实现抓包 16.1 控制台界面 16.1.1 NetWork 16.1.2 Sources 16.1.3 Console 16.1.4 Application 16 ...
【Visual C++】游戏开发笔记三十六浅墨DirectX提高班之四顶点缓存的逆袭
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8276363 作者:毛星云(浅墨 ...
(建议收藏)前端面试必问的十六条HTTP网络知识体系
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.已进行四个月了,很多小伙伴表示收获颇丰. 想学源码,极力推荐订 ...
版本更新带来的缓存问题_浏览器缓存原理总结
作者: Poetry 来源:http://blog.poetries.top/2019/01/02/browser-cache/ 一.浏览器缓存基本认识分为强缓存和协商缓存 1.浏览器在加载资源时, ...

webpack——webpack与浏览器缓存(十六)

调整项目

contenthash

webpack——webpack与浏览器缓存(十六)相关推荐

最新文章

热门文章