webapck 按需加载及版本控制问题

在启用webpack的懒加载(按需加载)后,我们会遇到要解决缓存的问题。

解决缓存问题有几种方法:

第一种就是加个hash值。便每次修改后所编译后的文件名都不一样。这样能达到预期解决缓存的效果。具体设置如下图:

  

  这种解决方案在webpack中可以达到工程化管理的效果。但会对项目管理有一定的阻碍。如用git来管理项目,每次编译都要删掉上一次编译的文件,然后要添加本次编译后的文件再推送。

第二种方法就比较暴力了。不添加hash值,这样每次编译所得到的文件名都是一样的配置如下图:

  

  我们要做的就是找到编译后的入口文件,然后找到它懒加载的方法,并对其进行修改,如加一个随机数,具体方法如下:

  在编译后的入口文件里查找“ document.getElementsByTagName("head")[0]”,找到其加载项,修改前的文件:

  

  修改后的文件:

  

  这样加载到的文件会有一随机数可确保缓存的问题,具体如下图:

  

  但这方法也是弊端,就是每次编译都要手动去修改入口文件。但对git项目管理却比较好管理,不用每次都去添加删除。

  以上两种方法都有利有弊,具体要用什么解决方案就看你如何取舍。当然也可能有更好的解决方案,如有知道的同学麻烦告知我一下。

时间: 2024-10-31 13:36:56

webapck 按需加载及版本控制问题的相关文章

使用babel-plugin-import实现antd组件库中的组件按需加载

Ant Design是蚂蚁金服基于react实现的一个UI 设计库,基于 npm + webpack + babel 的工作流,支持 ES2015.babel-plugin-import 可以从组件库中仅仅引入需要的模块,而不是把整个库都引入,从而提高性能. 如果使用 import { Button } from 'antd'; 的写法会引入 antd 下所有的模块. 为了提高打包编译的速度和浏览器下载资源的速度,可以通过以下的写法来只加载需要的组件: import Button from 'a

webpack 代码拆分,按需加载

转自:https://segmentfault.com/a/1190000007649417?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly 如果利用 webpack 将项目中的所有代码打包在一起,很多时候是不适用的,因为代码中有些东西我们总是希望将其拆分出来.比如: 样式表,希望利用 link 标签引入 使用概率较低的模块,希望后期需要的时候异步加载 框架代码,希望能利用浏览器缓存下部分不易变动的代码 下面是我在阅

按需加载.js .css文件

首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script><link>这两种元算--这句话是说给自己的.可以绑定点击事件,滚轮事件(例如图片的懒加载是动态的.) 使用 require.js (一个按需加载的插件)管理.js按需加载,来自http://www.cnblogs.com/chenxizhang/archive/2013/05/16/308194

图片滚动按需加载

对于图片缓存加载jquery有很多插件可以使用,一行代码就能搞定,可对于移动端并且在dom操作不多的情况下用jquery未免就有点拿大炮打蚊子的赶脚了,所以自己写了个原生的,有写的的不好的和需要优化的地方希望大家不吝赐教. 首先先获取需要缓存加载图片距浏览器顶部的距离,然后把页面上所有的img的实际地址写到alt上去,src全部用一张默认通用图 function getTop(dom){ var top = dom.offsetTop; var parent = dom; while(paren

图片的预加载和按需加载

图片预加载 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> img{width:500px;margin:100px auto;display: block;} </styl

性能优化之 - 按需加载

按需加载是网站性能优化立竿见影的其中一项,按需加载可以了解为 当用户触发某个动作的时候,才主动去请求资源,这样带来的优化好处:减少了HTTP请求,节省宽带,让页面首屏的内容更快展现在用户的视线范围内,可见极大提高了用户体检.触发的动作有很多,如鼠标点击,拉动页面滚动条,鼠标经过等等. [一] 图片按需加载 <img src="伪装的图片" width="990" height="90" data-src="http://dummy

.NET中的按需加载/延迟加载 Lazy&lt;T&gt;

业务场景: 在项目开发中,经常会遇到特定的对象使用的加载问题,有的实例对象我们创建之后并非需要使用,只是根据业务场景来调用,所以可能会导致很多无效的实例加载 延迟初始化出现于.NET 4.0,主要用于提高性能,避免浪费计算,并减少程序内存要求.也可以称为,按需加载 代码事例: 1.未进行延迟加载的情况 a.创建学生类: b.程序入口: c.运行结果: d.结果说明: 程序运行直接调用了构造函数,在使用Student对象之前 2.使用延迟加载 a.创建学生类:(代码如上1) b.程序入口: usi

iOS和tvOS游戏按需加载资源简介

摘要 与iOS 9和watchOS 2一起,苹果引入了一套新的内容分发API,以便节约设备空间,这就是按需加载资源.通过使用按需加载资源,我们可以将特定的应用程序资源托管在苹果的服务器上,然后在需要的时候进行加载.在这个教程中,我将通过开发一个图片查看应用介绍一下按需加载资源的基本用法. tvOS On Demand Reourse 按需加载 iOS开发 目录[-] 介绍 准备工作 1. 按需加载资源 益处 类别 限制 应用分片 删除按需加载资源 2. 分配和指定Tag 3. 访问按需请求资源

图片按需加载实现

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>按需加载图片</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 ul{ 12 } 13 img{ 14 w