精华内容
下载资源
问答
  • 静态资源缓存是前端性能优化一个点,所以在前端开发过程中,一般会最大限度利用缓存(这里主要是强缓存)。...区分一下几种不同hash我们都知道,webpack有各种hash,包括每次项目构建hash,不同入...

    静态资源缓存是前端性能优化的一个点,所以在前端开发过程中,一般会最大限度的利用缓存(这里主要是强缓存)。回到本文主题,在使用webpack构建的项目中,稍有不慎的话,即使服务器设置了缓存策略,可能构建的项目无法实现静态资源缓存。那么webpack怎样才能达到使用缓存的效果呢,下面就来谈谈这个问题。

    区分一下几种不同的hash

    我们都知道,webpack有各种hash值,包括每次项目构建hash,不同入口的chunkhash、文件的内容contenthash,这么多hash,它们有什么区别呢?

    hash

    • hash是跟整个webpack构建项目相关的,每次项目构建hash对应的值都是不同的,即使项目文件没有做“任何修改”。
    • 其实是有修改的,因为每次webpack打包编译都会注入webpack的运行时代码,导致整个项目有变化,所以每次hash值都会变化的。
    • 可以看出,前后两次对应项目构建hash改变了。由此推断使用该方式是无法达到缓存的,因为每次hash都会变化。

    chunkhash

    chunkhash,从字面上就能猜出它是跟webpack打包的chunk相关的。具体来说webpack是根据入口entry配置文件来分析其依赖项并由此来构建该entry的chunk,并生成对应的hash值。不同的chunk会有不同的hash值。一般在项目中把公共的依赖库和程序入口文件隔离并进行单独打包构建,用chunkhash来生成hash值,只要依赖公共库不变,那么其对应的chunkhash就不会变,从而达到缓存的目的。

    一般在项目中对webpack的entry使用chunkhash,具体表现在output配置项上:

    moudule.exports = {
      entry: {
       app: './src/main.js',
       vendor: ['react', 'redux', 'react-dom', 'react-redux', 'react-router-redux']
      },
      output: {
        path:path.join(__dirname, '/dist/js'),
        filename: '[name].[chunkhash].js'
      }
     ...
    }

    contenthash

    contenthash表示由文件内容产生的hash值,内容不同产生的contenthash值也不一样。在项目中,通常做法是把项目中css都抽离出对应的css文件来加以引用。比方在webpack配置这样来用

    module.exports = {
      ...
      plugins: [
         new ExtractTextPlugin({
        filename: 'static/[name]_[chunkhash:7].css',
        disable: false,
        allChunks: true
         })
      ...
      ]

    上面配置有一个问题,因为使用了chunkhash,它与依赖它的chunk共用chunkhash。

    比方在上面app chunk例子中依赖一个index.css文件,index.css的hash是跟着app的chunkhash走的,只要app文件变更的话,那么即使index.css文件没有变化,它的hash值也是会跟着变化的,导致缓存失效。

    那么这时我们可以使用extra-text-webpack-plugin里的contenthash值,保证即使css文件所处的模块里就算其他文件内容改变,只要css文件内容不变,它的hash值就不会变。

    实现js缓存

    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: "./src/main.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打包编译后的结果如下:

    e372ea210f4b5eb1d38f68aadfdd7e5a.png
     657DED48-411A-473B-9A24-4F9B009E50FD.png

    我们对其中的业务代码app.js进行修改后,重新编译结果如下:

    c5877ff0c365bf3d3c9b61079adb55cc.png
    C45B0F70-A8E0-4238-BD54-BF708EC57759.png

    可以发现,在CommonsChunkPlugin这种配置下,当业务代码app发生变化,而库代码也跟着变化,vender的chunkhash也跟着变化,这样vendor的引用的名称跟着变化,导致浏览器端的长缓存机制失效。

    引起问题的原因

    引起webpack每次打包编译时vendor跟着变化的原因:

    webpack每次build的时候都会生成一些运行时代码。当只有一个文件时,运行时代码直接塞到这个文件中。当有多个文件时,运行时代码会被提取到公共文件中,也就是上面CommonsChunkPlugin配置的vendor chunk中。

    webpack每次编译时产生的运行时代码,包括全局webpackJsonp方法的定义和维护模块依赖关系,具体可以参考这里>>。

    所以,上面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来说这种方式的收益更大。如下图:

    32253d20a83e5e879075988f114a11aa.png

    修改app代码后的打包编译结果如下,可以看到vendor的chunkhash没有变化

    ae516048d735710a20ae2618206f9652.png

    在webpack中配置CommonsChunkPlugin时需要注意几点:

    配置webpack的output项时,其filename和chunkFilename必须使用chunkhash。不要使用hash,否则即使按照上面的配置也不能达到预期的效果。至于hash与chunkhash的区别,可参考github的回答

    对于图片、字体等静态资源抽离使用的file-loader,其配置的hash表示的是静态文件的内容hash值,不是webpack每次打包编译生成的hash值, 切记!!!

    对于抽取的css样式文件,需要使用contenthash, 与file-loader中的hash意义相同。此处不能为chunkhash,否则其与抽取该样式文件的entry chunk的chunkhash保持一致,打不到缓存的目的。

    实现css的缓存

    webpack实现css的缓存,就是使用上面介绍过的contenthash,该hash属性值其实是extra-text-webpack-plugin计算的。具体实现css的缓存,其实就像下面一样使用contenthash即可.

    module.exports = {
      ...
      plugins: [
         new ExtractTextPlugin({
        filename: 'static/[name]_[contenthash:7].css',
        disable: false,
        allChunks: true
         })
      ...
      ]

    实现图片/字体的缓存

    对于图片、字体等静态资源,在使用webpack构建提取时,其实是使用了file-loader来完成的,生成对应的文件hash值也就是由对应的file-loader来计算的。那么这些静态文件的hash值使用的是什么hash值呢,其实就是hash属性值。如下面代码所示:

    module.exports = {
     ...
     rules: [
       ...
        {
          test: /.(gif|png|jpe?g)(?S*)?$/,
          loader: require.resolve('url-loader'),
          options: {
            limit: 10000,
            name: path.posix.join('static',  '[name]_[hash:7].[ext]')
          }
        },
        font: {
          test: /.otf|ttf|woff2?|eot(?S*)?$/,
          loader: require.resolve('url-loader'),
          options: {
            limit: 10000,
            name: path.posix.join('static', '[name]_[hash:7].[ext]')
          }
        }
     ]
    }

    可以看到上面使用的是hash属性值,此hash非webpack每次项目构建的hash,它是由file-loader根据文件内容计算出来的,不要误认为是webpack构建的hash。

    原文链接:https://blog.csdn.net/weixin_39939012/article/details/100920551

    展开全文
  • 我用JS修改input框里面的值,在页面上显示是修改成功了,但是数据提交或者是把焦点放到input框里面以后,又变成原来的值了 1.页面应该是用vue.js来写 2.我想知道怎样才能把数据彻底修改掉或者是找到存...
  • 在做上传本地图片的功能时遇到一个问题,第一次点file按钮选择图片完成会触发...每次创建完img后把file的value值重置为空字符串 注意:浏览器的安全机制不允许直接用js修改file的value为空字符串以外的值,强制.

    在做上传本地图片的功能时遇到一个问题,第一次点file按钮选择图片完成会触发onchange事件,第二次如果选择相同的图片文件上传,则不会触发onchange事件,原因是:因为选择的文件两次的路径值相同,值没有改变,所以导致file不会触发onchange事件,因此就想到一个解决办法,需要每次创建完img后重置file的value来解决这个问题。

    解决方法一

    每次创建完img后把file的value值重置为空字符串

    注意:浏览器的安全机制不允许直接用js修改file的value为空字符串以外的值,强制修改会报以下错误:

    VM4061:1 Uncaught DOMException: Failed to set the ‘value’ property on ‘HTMLInputElement’: This input element accepts a filename, which may only be programmatically set to the empty string.

    var file = document.getElementById('file');
    file.value = ''; //虽然file的value值不能设为有内容的字符,但是可以设置为空字符
    

    解决方法二

    每次创建完img后把file的outerHTML重置

    var file = document.getElementById('file');
    file.outerHTML = file.outerHTML; //重置了file的outerHTML
    
    展开全文
  • js 修改input text 的值

    万次阅读 2017-04-17 13:51:15
    之前用$getElementId('xxx').value=0; 结果发现在firefox这些浏览器上是无效 还得用下面 $getElementId('xxx').setAttribute('value',0);

    之前用$getElementId('xxx').value=0;  结果发现在firefox这些浏览器上是无效的

    还得用下面的


    $getElementId('xxx').setAttribute('value',0);

    展开全文
  • 我是在提交表单时候修改的 < input type="hidden" name="code1" id="hiddeninput" value=""> < input type="submit" onclick="return submitcheck()"> js代码 function submitcheck(){ document....
  • 抓包其实很多人最终目的,其实你想法我早已看透,就是为了设置断点修改下数据看看他神奇之处,中间人工具其实就是这样,有句话捎话捎多,捎钱少捎少,如果修改了数据中间人就是这种角色。设置断点两种方式...

    9e8e4ef20474545c983d190ac9ee3599.png
    抓包其实很多人的最终目的,其实你的想法我早已看透,就是为了设置断点修改下数据看看他的神奇之处,中间人的工具其实就是这样,有句话捎话捎多,捎钱少捎少,如果修改了数据中间人就是这种角色。

    1200ea00e3c53e905d5d8150e83deaa6.png

    设置断点的两种方式

    (一)基于图形界面

    可以在请求之前进行断点的设置,也可以响应之后进行断点的设置。什么请求都拦截 很不推荐!

    7b1dc774f95ed8fc1d0ad2a05847321e.png

    bae594592c9839af52523c2450cf7e4c.png
    启动Before Requests设置

    981ed02664d36436f72dd1c9beecbefd.png
    修改了GET请求jianshu的,改成baidu,删除Host

    9b50ed2cfd0cbbdb00e7b0e10513f736.png
    结果跳到baidu。但是连接地址还是jianshu的

    2dee8f5063d05cbf31973bb2404a1b1a.png
    节点可以选择repsonpse,返回http的code结果

    783be5dab0f907cdf0627d651fd92757.png
    选择404,点击Run to completion

    18d5a77de132568c70cb2c3ad3f0acc9.png

    (二)命令方式进行拦截

    bpu http://www.baidu.com,在这里命令行的方式

    45503b6dcd05e7f721298a021be65924.png
    输入回车之后

    5c502cff9da9a4635aac9e4598223647.png

    cffce64797f6b1fdee6dc633b483dffc.png

    5248e87fdd21ba8b085817419fe99005.png
    百度搜索其实是2个请求,里面有两个wd 都需要修改,修改wd后,需要点击break on response
    修改wd内容,然后点击breank on response

    b196366348a0bad466534b70b2dae6f9.png
    修改wd内容,然后点击breank on response

    eaf10b412c178d3fd8d527a5124fcec4.png
    两个wd都修改完毕后,点击第一个Run to Completion
    已经按照修改后的搜索了。

    c99c42b13fed3f51a8c29e66c8423d40.png
    清除是 bpu 回车

    e3441027570199d9bf8d2a0fbf81498a.png


    image.png

    总结下如何拦截修改数据:
    1. bpu http://www.baidu.com 绑定要修改的域名
    2. 请求接口,查看详情页面,停在拦截端口上
    3. Inspectors - webform修改里面的值。
    4. 多个先点击Break on Response
    5. 点击Run to Completion 发送修改后的数据
    6. 清除抓取的网站 直接输入 bpu
    • bpafter的场景
    在进行线上开发的时候,如果线上的js有问题,本地修改后可能需要在线上进行调试。如果在把代码上传上去在调试这种方式就太lower了。现在试试直接上传本地的,通过fiddler修改使,本地的js替换远程js。

    1.拖文件到autoResponder中

    f642e5d88ef47fa8a267480ce7003e45.png

    2.点击文件,选择红色框

    1d38a1601aff3453f7142e2b58330237.png

    3.可以根据你拖进来的远程的文件,改成本地的文件。例如远程是js,你选择本地的js,远程js有问题,本地修改后,上传本地的js

    55dc0cc0bc60771d516236770052f017.png

    731d0a62552a3c1b397db266173ccbc2.png

    PS:如何篡改数据,如何拦截基本已经讲完了。其实并不复杂。拦截指定的图片只要能够选择上的都可以进行拦截。然后替换本地的方便调试。

    展开全文
  • 之前用是.val() 函数 改用.attr("value",“”)函数 修改后,清空下浏览器缓存
  • <input type="text" value="" id="test" /> ... function test01() { $("#test").val($("#test").val() + "1");...在不修改test01函数情况下如何实现点击按钮改变input标签value值时就触发一个事件?
  • v-model只是一种语法糖,底层方法还是去监听input事件。所以可以使用dispatchEvent事件给元素分配一个input事件,这样可以手动触发 inputElement input 事件,同时可以触发 v-model 机制。IE 好像不支持(但...
  • As we all know,input框的change事件是基于失焦事件onblur的,所以如果js操作input的值是没有失焦这个概念的,自然也无法触发onchange事件。 解决方案:用js在操作元素中新建一个 _value 的属性,把原来 js 对 ...
  • js清空input file的值

    2019-11-18 16:45:22
    因为js的安全机制规定不可以直接用js修改file的value为有效,所以解决方法是设置file的value为空字符,或者把file的html重新初始化来解决清空的问题。 var file = document.querySelector('input[type=file]'); ...
  • js修改不了input的值

    千次阅读 2017-04-08 21:14:05
    今天想做一个通过点击按钮,修改input值的控件,但是点击按钮后,input变成修改的值后又变回了原来的值,百思不得其解,代码如下 form> div class="input-num"> input type="text" value="1" id="num"> button ...
  • JS oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况: 修改input:checkbox 或者 ...
  • 实现一个根据iframe页面返回充值卡类型不同,安排不同的input部件。 ...2、充值卡id(用UUID)...遇到问题是当iframe选择充值卡时,无法获取parent页面input部件value值的change事件。 parent页js $("#id_card_type
  • 之前有一个需求,需要在input blur时候trim字符串。 在网上看了很多方案,尝试过后终于找到,其实也很简单。 $('body').on('blur', "input[type='text']", (event) =&gt; { let { value } = event...
  • jquery 给input text元素赋值,js修改表单的值 简单粗暴: (第一种) $('#checkUserName').attr("value",sessionUser.name); (第二种) $("#checkUserName").val(sessionUser.name) //document....
  • js获取select标签选中的值 var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj....
  • js清空input file

    2018-11-07 11:49:00
    项目进行导入操作,如果第一次导入某个文件会触发导入操作,... 解决这个问题的思路是每次创建完导入数据后把file的路径清空,但浏览器的安全机制限制不可以直接用js修改file的value为有效,解决方法是设置fi...
  • JS 动态修改 input type 属性

    万次阅读 2011-06-15 15:37:00
    JS 动态修改 input 的 type 属性 调用: $(“#uname”);可选参数class为获取焦点时input的class,但是清除密码的时候出了一个问题,用户输入的密码应该是 ”*****”,这里需要将input 的type 属性由 text 换成 ...
  • javascript:mainfrm.username.value="stangray";mainfrm.submit.focus(); Angular $("#id").val(value).trigger('change');
  • JS 选择性修改input标签属性

    千次阅读 2019-01-12 17:30:38
    修改文本框的值" id="btn"/&gt;&lt;br/&gt; &lt;input type="text" value=""/&gt;&lt;br/&gt; &lt;input type="text" value="&...
  • 修改一个功能时发现表格td中的input是动态加载js无法直接通过id直接获取input的值 <td class="tableFormInput" width="45%" id="QueryCondition"> </td> td中无input 页面加载时如图: 想要获取...
  • 上传文件时,出于安全起见属性value是只读,不允许在输入框中编辑或修改,在js中用 “xxx.value=” 修改也不行,只能通过“浏览”按钮选择一个文件方式修改value的值。另外,就算是在定义<input type="file"&...
  • 需要实现效果:一个输入框,当输入框未获得焦点时候,value 为 “密码”;当输入框失去焦点时候,输入内容显示为”*****”我们很直接会想到下面的js$(“#showPwd”).focus(function(){$(this).attr(‘type',...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 231
精华内容 92
关键字:

js修改input的value值