Chrome瀏覽器完美保存整個網頁-頁面離線保存

hrome瀏覽器完美保存整個網頁---頁面離線保存

SingleFile 是一個瀏覽器插件兼容 Chrome、Firefox（桌面端和移動端）、Microsoft Edge、Vivaldi、Brave、Waterfox、Yandex 和 Opera 瀏覽器。它可以幫助你將一個完整的網頁保存為一個單一的 HTML 文件。另一個版本SingleFileZ 是一款可以把一個網頁包括圖片、樣式完整打包壓縮后保存為 HTML 的瀏覽器擴展，并且能夠讓瀏覽器實現自解壓。SingleFileZ很有意思，SingleFileZ 與 SingleFile 功能完全相同，只不過增加了壓縮功能，使用 SingleFile 下載后的單一 HTML 文件為 627KB，而使用 SingleFileZ 下載后的單一 HTML 文件為 265 KB。而更有意思的是，可以直接使用壓縮工具打開由 SingleFileZ 生成的 HTML 文件，不過要打開這個壓縮 HTML 文件，需要 Chrome 啟動時添加 –allow-file-access-from-files 參數。

下載使用

SingleFile在主流的瀏覽器插件商店可用：

Firefox: https://addons.mozilla.org/firefox/addon/single-file
Chrome: https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle
Microsoft Edge: https://microsoftedge.microsoft.com/addons/detail/efnbkdcfmcmnhlkaijjjmhjjgladedno

也可以下載插件的 zip 包 – https://github.com/gildas-lormeau/SingleFile/archive/master.zip，拖曳到瀏覽器插件管理界面進行安裝。

SingleFile的使用非常簡單，等待網頁完全加載完畢，點擊插件工具欄上的 SingleFile 按鈕即可保存頁面，下載的 HTML 文件保存在瀏覽器設置的本地文件夾。在處理一個頁面時，你可以再次點擊該按鈕來取消該動作。

額外的功能

選擇保存整個標簽頁面、選定的內容、選定的框架
一鍵處理多個標簽頁并選擇保存
給網頁添加高亮字體、筆記、移除內容后保存
自動化下載
自定義保存到 Google Drive 或 GitHub

GitHub 地址：

https://github.com/gildas-lormeau/SingleFile
依托于網站的互聯網內容基于所在服務器的穩定性，當我們需要不時參考一些網頁時，最好使用 SingleFile 將它們保存到本地；SingleFile 可以一比一復制下載任意網頁到單個 HTML，方便管理又不是很占內存，實在是一款數據安全神器。還有另一個不錯的Joplin值得推薦！本文不介紹了。

錄了自己的博客在禁用緩存的情況下，從八九秒加載時間到最終985ms的優化實踐，開啟緩存的情況下能達到138ms的訪問速度

本人的個人博客采用的是Vue-cli4.1.2 + typescript構建的，項目目錄結構如下

├─ src    //主文件
│  ├─ api    //接口文件夾
|  |  |- config.js    //后端接口地址的配置,將測試、開發、生產環境分開
|  |  └─ user.js      //接口文件，配置了token請求頭，具體接口根據需求修改
│  ├─ assets   //資源文件   
│  ├─ components   //公用組件
│  ├─ directive   //vue自定義指令
|  ├─ filters      //存放過濾器文件，自帶了手機號加密，手機號格式化，時間日期處理
|  ├─ interceptors    //存放axios攔截器配置，寫入了接口調用的loading加載以及http狀態碼報錯攔截
|  ├─ interceptors    //放置公用的接口，對數據進行類型限制
|  ├─ layout      //布局文件，通過子路由渲染方式實現，具體HTML布局根據需求修改  
|  ├─ mixins      //混入文件，配置了一個平滑滾動的方法
|  ├─ plugins     //外部插件文件夾，配置了按需引入的element-ui
|  ├─ reg    //存放正則以及校驗的文件夾
|  |  |- reg.ts      //存放正則表達式，自帶了傳真，郵箱，qq，手機號，銀行卡號，固定電話，密碼強度校驗正則
|  |  └─ validator.ts      //存放element-ui自定義校驗，自帶了傳真，郵箱，qq，手機號，銀行卡號，固定電話，密碼強度自定義校驗
|  ├─ router      //路由文件
|  ├─ store       //vuex全局變量文件
|  |  |- index.ts      //store主文件
|  |  └─ module     //store模塊文件夾
|  |  |  └─ user.ts      //存放user相關的全局變量
|  ├─ stylus   //css預處理器文件夾
|  |  |- reset.styl      //樣式初始化文件,自帶了非標準盒子，a標簽清除下劃線，清除內外邊距，禁止圖片拖拽等效果
|  |  └─ color.styl     //顏色變量文件
|  ├─ utils   //公用方法文件夾
|  |  |- area.ts      //存放省市區三級地區的數據
|  |  |- array.ts      //存放數組相關的公用方法，自帶了兩個元素交換位置，元素前進后退一格，元素置頂或末尾，去重，刪除指定元素操作
|  |  └─ object.ts    //存放對象相關的公用方法，自帶了對象清空所有值的方法
|  ├─ views   //頁面文件夾
|  ├─ main.ts   //主配置文件
|  ├─ babel.config.js   //babel配置文件，寫入了element-ui按需加載的配置
|  ├─ package.json   //npm的包管理文件
|  ├─ tsconfig.json   //ts配置文件
|  ├─ vue.config.js   //vue配置文件

1.關閉productionSourceMap

首先，由于最新版的腳手架不自帶配置文件了，先在根目錄新建vue.config.js文件，關閉productionSourceMap，在vue.config.js中寫入如下內容

module.exports = {
    productionSourceMap: false
}

2.開啟Gzip壓縮

安裝插件compression-webpack-plugin，打開代碼壓縮，npm install --save-dev compression-webpack-plugin，現在的vue.config.js代碼如下，但是，需要注意的是，服務器上nginx也必須開啟gzip才能生效

// 是否為生產環境
const isProduction = process.env.NODE_ENV !== 'development';

// gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
    productionSourceMap: false,
    configureWebpack: config => {
        // 生產環境相關配置
        if (isProduction) {
            //gzip壓縮
            const productionGzipExtensions = ['html', 'js', 'css']
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp(
                        '\\.(' + productionGzipExtensions.join('|') + ')$'
                    ),
                    threshold: 10240, // 只有大小大于該值的資源會被處理 10240
                    minRatio: 0.8, // 只有壓縮率小于這個值的資源才會被處理
                    deleteOriginalAssets: false // 刪除原文件
                })
            )
        }
    }
}

打開nginx文件夾下的nginx.conf文件，在http模塊中寫入以下內容

    # 開啟gzip
    gzip on;

    # 啟用gzip壓縮的最小文件，小于設置值的文件將不會壓縮
    gzip_min_length 1k;

    # gzip 壓縮級別，1-9，數字越大壓縮的越好，也越占用CPU時間，后面會有詳細說明
    gzip_comp_level 2;

    # 進行壓縮的文件類型。javascript有多種形式，后面的圖片壓縮不需要的可以自行刪除
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

    # 是否在http header中添加Vary: Accept-Encoding，建議開啟
    gzip_vary on;

    # 設置壓縮所需要的緩沖區大小     
    gzip_buffers 4 16k;

然后輸入命令nginx -s reload重啟nginx服務

如果后端nginx開啟了gzip，可以從network中的Content-Encoding中看到gzip

image.png

3.開啟CDN加速(建議選配，CDN雖然速度快，但沒有本地打包穩定)

將使用的插件使用cdn鏈接，并且配置webpack將使用CDN的插件不進行打包，別忘記還要再index.html中引入js以及css

// 是否為生產環境
const isProduction = process.env.NODE_ENV !== 'development';

// 本地環境是否需要使用cdn
const devNeedCdn = false

// cdn鏈接
const cdn = {
    // cdn：模塊名稱和模塊作用域命名（對應window里面掛載的變量名稱）
    externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        'marked': 'marked',
        'highlight.js': 'hljs',
        'nprogress': 'NProgress'
    },
    // cdn的css鏈接
    css: [
        'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css'
    ],
    // cdn的js鏈接
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/marked/0.8.0/marked.min.js',
        'https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js',
        'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js'
    ]
}

module.exports = {
    chainWebpack: config => {
        // ============注入cdn start============
        config.plugin('html').tap(args => {
            // 生產環境或本地需要cdn時，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
        // ============注入cdn start============
    },
    configureWebpack: config => {
        // 用cdn方式引入，則構建時要忽略相關資源
        if (isProduction || devNeedCdn) config.externals = cdn.externals
    }
}

接下來，在index.html中引入使用了CDN的鏈接

<!DOCTYPE html>
<html lang="en" style="width: 100%;height: 100%;">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    <link
            href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
            rel="stylesheet"
    />
    <% } %>
    <!-- 使用CDN的CSS文件 -->

    <title>CoolDream</title>
  </head>
  <body style="width: 100%;height: 100%;">
    <noscript>
      <strong>We're sorry but blog doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->

    <!-- 使用CDN的JS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    <!-- 使用CDN的JS文件 -->

  </body>
</html>

打包后拋到服務器上，打開開發者工具的network，如果看到http請求cdn，那么就代表配置成功了，如圖所示

image.png

4.代碼壓縮

先安裝插件npm i -D uglifyjs-webpack-plugin

然后在最上方引入依賴

// 代碼壓縮
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

在configureWebpack模塊中引入代碼壓縮

// 代碼壓縮
config.plugins.push(
    new UglifyJsPlugin({
        uglifyOptions: {
            //生產環境自動刪除console
            compress: {
                drop_debugger: true,
                drop_console: true,
                pure_funcs: ['console.log']
            }
        },
        sourceMap: false,
        parallel: true
    })
)

5.公共代碼抽離，寫在configureWebpack模塊中

// 公共代碼抽離
config.optimization = {
    splitChunks: {
        cacheGroups: {
            vendor: {
                chunks: 'all',
                test: /node_modules/,
                name: 'vendor',
                minChunks: 1,
                maxInitialRequests: 5,
                minSize: 0,
                priority: 100
            },
            common: {
                chunks: 'all',
                test: /[\\/]src[\\/]js[\\/]/,
                name: 'common',
                minChunks: 2,
                maxInitialRequests: 5,
                minSize: 0,
                priority: 60
            },
            styles: {
                name: 'styles',
                test: /\.(sa|sc|c)ss$/,
                chunks: 'all',
                enforce: true
            },
            runtimeChunk: {
                name: 'manifest'
            }
        }
    }
}

6.圖片壓縮()

1.使用圖片壓縮插件

先安裝插件npm install image-webpack-loader --save-dev
在chainWebpack中新增以下代碼

// ============壓縮圖片 start============
config.module
    .rule('images')
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({ bypassOnDebug: true })
    .end()
// ============壓縮圖片 end============

所以最終的配置如下

// 是否為生產環境
const isProduction = process.env.NODE_ENV !== 'development';

// 代碼壓縮
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 本地環境是否需要使用cdn
const devNeedCdn = false

// cdn鏈接
const cdn = {
    // cdn：模塊名稱和模塊作用域命名（對應window里面掛載的變量名稱）
    externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        'marked': 'marked',
        'highlight.js': 'hljs',
        'nprogress': 'NProgress'
    },
    // cdn的css鏈接
    css: [
        'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css'
    ],
    // cdn的js鏈接
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/marked/0.8.0/marked.min.js',
        'https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js',
        'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js'
    ]
}

module.exports = {
    productionSourceMap: false,
    chainWebpack: config => {
        // ============注入cdn start============
        config.plugin('html').tap(args => {
            // 生產環境或本地需要cdn時，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
        // ============注入cdn start============

        // ============壓縮圖片 start============
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
        // ============壓縮圖片 end============
    },
    configureWebpack: config => {
        // 用cdn方式引入，則構建時要忽略相關資源
        if (isProduction || devNeedCdn) config.externals = cdn.externals

        // 生產環境相關配置
        if (isProduction) {
            //gzip壓縮
            const productionGzipExtensions = ['html', 'js', 'css']
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp(
                        '\\.(' + productionGzipExtensions.join('|') + ')$'
                    ),
                    threshold: 10240, // 只有大小大于該值的資源會被處理 10240
                    minRatio: 0.8, // 只有壓縮率小于這個值的資源才會被處理
                    deleteOriginalAssets: false // 刪除原文件
                })
            )

            // 代碼壓縮
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        //生產環境自動刪除console
                        compress: {
                            drop_debugger: true,
                            drop_console: true,
                            pure_funcs: ['console.log']
                        }
                    },
                    sourceMap: false,
                    parallel: true
                })
            )
        }

        // 公共代碼抽離
        config.optimization = {
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        chunks: 'all',
                        test: /node_modules/,
                        name: 'vendor',
                        minChunks: 1,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 100
                    },
                    common: {
                        chunks: 'all',
                        test: /[\\/]src[\\/]js[\\/]/,
                        name: 'common',
                        minChunks: 2,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 60
                    },
                    styles: {
                        name: 'styles',
                        test: /\.(sa|sc|c)ss$/,
                        chunks: 'all',
                        enforce: true
                    },
                    runtimeChunk: {
                        name: 'manifest'
                    }
                }
            }
        }
    }
}

2.將靜態資源存儲在云端，個人用的七牛云,對象存儲用于存儲文件，使用cdn加速讓存儲的靜態資源訪問速度更快。(推薦，速度能快挺多)

我個人申請了七牛云，實名認證就有10G空間可用，每個月有10G的免費流量，不過不綁定域名的話只有30天體驗機會，我是綁定了我的域名進行DNS解析中轉，具體的操作可以參考這一篇博客，https://www.cnblogs.com/mazhichu/p/12206785.html

7.nginx配置緩存同樣也可以提高網站的訪問速度（雖然這點有點偏離前端打包主題了，但是對于自己獨立開發個人博客網站的前端來說還是非常有用的?。?/h1>

在nginx.conf的http模塊中寫入一下內容

     # 設置緩存路徑并且使用一塊最大100M的共享內存，用于硬盤上的文件索引，包括文件名和請求次數，每個文件在1天內若不活躍（無請求）則從硬盤上淘汰，硬盤緩存最大10G，滿了則根據LRU算法自動清除緩存。
    proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;

然后在nginx.conf的serve模塊中寫入一下內容，保存配置，nginx -s reload重啟服務即可看到效果

一節中，我們已經安裝好了 webpack ，本節我們來學習何使用 webpack 進行文件打包。

使用webpack打包文件

要打包文件，首先我們需要初始化一個項目，前面我們已經創建好了一個 xkd_webpack 的項目，并且這個項目根目錄下已經有了一個 package.json 文件、package-lock.json 文件和一個 node_modules 文件夾，如下所示：

在實際項目中，為了方便管理許多文件，我們可能需要創建一個 src 文件夾存放入口文件等開發文件，然后創建一個 dist 文件夾存放最終打包的文件，還有其他類型的文件，為了方便管理我們也會放在同一個目錄下。

但是因為我們這里只是舉例說一下如何使用 webpack 打包文件，所以我們直接項目根目錄下，創建一個靜態頁面 index.html 和一個 JS 的入口文件 index.js 文件，文件名稱是我們自定義的，如果你想使用其他的名稱也是可以的。

下面是 index.html 文件的內容：

<html>
    <head>
        <meta charset="utf-8">
        <title>webpack入門</title>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js"></script>
    </body>
</html>

在這個 HTML 文件中我們引入了一個 bundle.js 文件，這個 bundle.js 文件就是最終的打包后的文件，但是現在還沒有生成喲，要等我們執行完打包命令后才會生成這個文件。

然后入口文件 index.js 的內容如下所示：

document.write('你好，俠課島！');

最后執行下列命令，就可以成功將 index.js 文件打包到 bundle.js文件中：

webpack index.js -o bundle.js

執行命令效果如下所示：

命令執行成功后，項目根目錄下會生成一個 bundle.js 文件。這個文件的作用就是用了一個立即執行函數，然后將 index.js 的內容封裝成一個函數，作為參數傳進內部執行，這樣就完成了文件的打包：

此時我們在瀏覽器中打開 index.html 文件，頁面將會顯示 "你好，俠課島！"，這同時也能證明 index.js 文件成功打包到了 bundle.js 文件中，因為我們只在 index.html 文件中引入了 bundle.js 文件。

打包多個文件

當然我們在項目中肯定不只有一個 .js 文件，那么如果我們除了 index.js 文件還有其他的 .js 文件，要如何做呢。

示例：

例如項目中還有一個 module.js 文件，內容如下所示：

module.exports = '俠課島歡迎你！'

這樣我們可以修改入口文件 index.js，將創建好的 module.js 模塊引入到入口文件中：

document.write('你好，俠課島！')
document.write(require('./module.js')) // 引入模塊

再次執行 webpack index.js -o bundle.js ，會重新打包文件。

在頁面啟動時，會先執行 index.js 文件中的代碼，其它文件中的代碼會在執行到 require 語句的時候再執行。此時刷新瀏覽器，我們可以看到瀏覽器中的顯示內容發現了改變，顯示內容變為 "你好，俠課島！俠課島歡迎你！"。

webpack 會分析入口文件，解析包含依賴關系的各個文件，這些文件都打包到 bundle.js 中。webpack 會給每個模塊分配一個唯一的 id 并通過這個 id 索引和訪問模塊。

總結

在舊版本的 webpack 中，我們是使用 webpack index.js bundle.js 命令來執行打包操作，而新的 webpack4.0+ 版本打包文件時要在命令中加一個 -o ，否則會報錯。

鏈接：https://www.9xkd.com/

在線咨詢

上一篇：HTML 實例
下一篇：下拉菜單設計指南

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商