django-webpack体验

闾丘淇
2023-12-01

自己在django中写静态文件时,出过这样的问题: 对一个已经写好的文件(例: example.js, example.png, example.css),如果我再去修改/替换的话,如果最终文件的地址不变,用户的浏览器可能会因为缓存而依旧使用旧的文件。类似的,cdn服务商处可能也需要我们去手动刷新以更新。这样既麻烦,也容易出错。

之前在使用react的时候接触到了webpack,他有一个很方便的功能,就是能够修改文件名(增加hash码 [name]-[hash:8].js ), 从而实现区别新老版本的功能。在网上搜了一下,发现有 django-webpack-loader 这个库,使用了下,确实好用。

简单看了下它的原理,主要是通过在webpack中引入BundleTracker,从而生成一个stats.json文件供模板中的render_bundle去读取。在webpack的不同阶段,stats.json的内容不同, 以告知render_bundle正在打包(compiling)/打包出错(error)/打包成功(done)。

具体的使用姿势可以见官方博客

另外,在使用了webpack后, 我们可以使用webpack的其他优秀功能,比如利用hmr在反复修改scss时不用去刷新浏览器,提高效率。

最后,在网上搜icon-font时,找到了一个叫fontello的优秀开源解决方案,能够帮助我们只引入需要的字体文件。如果用webpack的话,通过url-loader?limit=10000&name=images/[name].[ext]的配置能够进一步减少浏览器端的网络请求开销。到时候看看写不写这个东西吧。

 类似资料: