javaweb項目css和js引入導致緩存問題解決方案

編程語言 CSS Node.js 技術 夢曳朗空 2017-08-03

javaweb項目css和js引入導致緩存問題

  1. css引入:<link href="css/style.css?v=<%= System.currentTimeMillis()%>" rel="stylesheet"type="text/css" />

    加個時間戳. 每次打開頁面css名稱都不一樣,所以就不會有緩存咯.

    但是,如果css文件很大的話,每次打開網頁都會重新加載,這樣會影響網頁加載速度,用戶體驗不太好。所以最好還是加上 項目的版本號 最好,每次改代碼,發佈都是一個新版本。

    例如:<link href="css/style.css?v=9527" rel="stylesheet"type="text/css" />

  2. FIS是專為解決前端開發中自動化工具、性能優化、模塊化框架、開發規範、代碼部署、開發流程等問題的工具框架。

    使用FIS我們可以快速的完成各種前端項目的資源壓縮、合併等等各種性能優化工作,同時FIS還提供了大量的開發輔助功能

    首先我們瞭解一下FIS的基本命令

    fis install : 命令安裝fis倉庫提供的各種 組件、框架、示例、素材、配置等 開發資源。

    fis release: 命令用於編譯併發布的你的項目,擁有多個參數調整編譯發佈操作。

    fis server: 命令可以啟動一個本地調試服務器用於預覽fis release產出的項目。

    接下來我們可以通過快速入門進一步的瞭解FIS。

    (1)準備工作

    工具安裝

    FIS使用Node.js開發,以npm包的形式發佈。因此使用FIS需要先安裝Node.js,再通過npm安裝命令進行FIS安裝。

  3. $ npm install -g fis

    示例準備

    在介紹FIS的主要功能前,需要先準備一個示例項目。我們可以使用Lights包管理安裝,也可以從Github獲取

  4. $ npm install -g lights #要求node版本在v0.10.27以上
  5. $ lights install fis-quickstart-demo

    本地預覽

    首先我們可以通過 fis server start 命令啟動FIS的本地調試服務器功能對構建發佈的項目進行預覽調試

    注意

    如果8080端口被佔用,可以通過 fis server start -p [port] 指定新的端口。

    如果沒有java、php環境,可以通過 fis server start --type node 啟動Node版fis server。

    命令執行後內置服務器會一直運行,可以通過 fis server stop 命令關閉內置服務器。

    本地調試服務器啟動成功後,就會自動打開 http://127.0.0.1:8080 ,但是此時服務器內沒有任何內容。我們還需要通過FIS發佈DEMO項目才能進行預覽

  6. $ cd fis-quickstart-demo #進入DEMO目錄$ fis release #編譯併發布DEMO
  7. fis release 命令會將編譯後的項目發佈至本地調試服務器,再次刷新瀏覽器頁面,我們就可以到fis-quickstart-demo項目的主頁了。

    資源壓縮

    資源壓縮一直是前端項目優化中非常重要的一環,使用FIS我們無需任何配置,只需要一個命令就可以完成壓縮工作。

  8. $ fis release --optimize

    添加文件版本

    FIS能夠根據靜態資源的內容自動生成文件版本,自動更新資源引用路徑,解決緩存更新問題,告別手動更新時間戳。

    我們通過開啟 --md5 參數,為項目中的靜態資源添加md5版本號

  9. $ fis release --optimize --md5 # fis release -om

    刷新頁面,我們可以看到所有資源均加上了md5版本號

    javaweb項目css和js引入導致緩存問題解決方案

相關推薦

推薦中...