webpack实现静态资源缓存的那点事
2017-12-31 00:35
501 查看
引言
webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介绍,不太了解可以参考webpack官网介绍;
该插件是webpack项目常用的一个优化功能,几乎在每个webpack项目中都会用到。使用该插件带来的好处:
提升webpack打包速度和项目体积:将webpack入口的chunk文件中所有公共的代码提取出来,减少代码体积;同时提升webpack打包速度。
利用缓存机制:依赖的公共模块文件一般很少更改或者不会更改,这样独立模块文件提取出可以长期缓存。
但是在项目中,若插件打开方式不正确的话,上面的第二点其实是无法实现,因为这种情况下:
没有被修改过的公有代码或库代码打包出的Entry Chunk,会随着其他业务代码的变化而变化,导致页面上的长缓存机制失效。
那么,下面就来开启
CommonsChunkPlugin正确的打开方式。
CommonsChunkPlugin不正确用法
假如将我们项目的公共库如react、react-dom、react-router与业务代码隔离,将其提取为vendor chunk,webpack配置如下:const webpack = require("webpack"); const path = require('path'); module.exports = { entry: { app: "./app.js", vendor: ["react","react-dom", "redux", "react-redux", "react-router-redux"] }, output: { path: path.resolve(__dirname, 'output'), filename: "[name].[chunkhash].js" }, plugins: [ new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]}) ] };
上面将项目一些基础库打包成一个名为vendor的chunk中,并将业务相关的代码打包到一个名为app的chunk中;
webpack打包编译后的结果如下:
![](https://images2017.cnblogs.com/blog/408483/201712/408483-20171230210933304-1722624213.png)
我们对其中的业务代码app.js进行修改后,重新编译结果如下:
![](https://images2017.cnblogs.com/blog/408483/201712/408483-20171230211016585-1547540861.png)
可以发现,在CommonsChunkPlugin这种配置下,当业务代码app发生变化,而库代码也跟着变化,vender的chunkhash也跟着变化,这样vendor的引用的名称跟着变化,导致浏览器端的长缓存机制失效。
引起问题的原因
引起webpack每次打包编译时vendor跟着变化的原因:webpack每次build的时候都会生成一些运行时代码。当只有一个文件时,运行时代码直接塞到这个文件中。当有多个文件时,运行时代码会被提取到公共文件中,也就是上面CommonsChunkPlugin配置的vendor chunk中。
webpack每次编译时产生的运行时代码,包括全局webpackJsonp方法的定义和维护模块依赖关系,具体可以参考这里的commons.js。
所以,上面webpack的CommonsChunkPlugin配置中,每次编译时这些代码都会打包到vendor中,导致每次vendor的chunkhash每次都会变化。
那么,我们可以在对vendor chunk进行配置,抽取其中的公共代码,即webpack运行时代码,这样就可以将项目依赖的基础库模块与业务模块隔离开来,因为不会对这些文件进行修改,所以这些文件可达到长缓存的作用。具体配置如下:
module.exports = { entry: { app: "./app.js", vendor: ["react","react-dom", "redux", "react-redux", "react-router-redux"] }, .... plugins: [ new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]}), new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] }) ] };
这样,即使修改业务app代码,项目依赖的基础库vendor chunk也不会发生变化;只是抽取的manifest chunk每次还会变化,但是这个文件体积非常小,相比vendor来说这种方式的收益更大。如下图:
![](https://images2017.cnblogs.com/blog/408483/201712/408483-20171230215918695-1845153786.png)
修改app代码后的打包编译结果如下,可以看到vendor的chunkhash没有变化
![](https://images2017.cnblogs.com/blog/408483/201712/408483-20171230215943038-1111595157.png)
在webpack中配置CommonsChunkPlugin时需要注意几点:
1、 配置webpack的output项时,其
filename和
chunkFilename必须使用chunkhash。不要使用hash,否则即使按照上面的配置也不能达到预期的效果。至于hash与chunkhash的区别,可参考github的回答
3、对于抽取的css样式文件,需要使用
contenthash, 与
file-loader中的hash意义相同。此处不能为chunkhash,否则其与抽取该样式文件的entry chunk的chunkhash保持一致,打不到缓存的目的。
参考
1、webpack之CommonsChunkPlugin正确打开方式2、webpack 填坑之路--提取独立文件(模块)
3、webpack代码分割技巧
4、听说你用webpack处理文件名的hash?那么建议你看看你生成的hash对不对
5、chunkhash
6、multiple-commons-chunks
相关文章推荐
- 用webpack打包vue项目后,静态资源路径失效问题
- 用 webpack 实现持久化缓存
- WKWebView实现网页静态资源优先从本地加载
- webpack配置项目加载静态资源
- Nginx实现静态资源的缓存
- 【原创】分布式之缓存击穿 【原创】自己动手实现静态资源服务器 【原创】自己动手实现JDK动态代理
- webpack对静态资源打包
- 用 webpack 实现持久化缓存
- LAMP+haproxy+varnish实现网站访问的动静分离及静态资源缓存
- 深入浅出的webpack4构建工具---浏览器前端资源缓存(十一)
- Haproxy + Varnish 实现WEB静态页面缓存
- 基于springmvc实现静态资源缓存(包括上传的图片文件)
- LAMP+NFS实现多个web服务器静态资源统一存储
- webpack.DllPlugin和webpack.DllReferencePlugin静态资源预编译插件
- WebPack系列:Webpack编译的代码如何在tomcat中使用时静态资源路径不对的问题如何解决
- Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件
- 利用 webpack 处理开发与线上环境静态资源切换问题
- webpack 静态资源集中输出的方法示例
- 关于web开发中静态资源缓存机制的总结
- 详解vue-cli与webpack结合如何处理静态资源