深刻淺出的webpack4構建工具---瀏覽器前端資源緩存(十一)

時間  2019-11-13
標籤 深刻 webpack4 webpack 構建 工具 瀏覽器 前端 資源 緩存 十一 欄目 瀏覽器 简体版
原文   原文鏈接

閱讀目錄css

一. 理解使用hashhtml

二：理解使用chunkhash前端

三：對第三方庫打包後使用緩存node

四：contenthashjquery

一. 理解使用hashwebpack

   通常狀況下，對於前端靜態資源，瀏覽器訪問的時候但願資源都可以進行緩存，當第二次及之後進入頁面的時候，頁面就能夠直接使用緩存資源，這樣的話，頁面打開速度很快，提升了用戶體驗同時也節省了帶寬資源。而其中最爲常見的一種最大化利用緩存的形式就是爲靜態資源加上hash, 使用一個不會重複的標識符來達到資源能夠永久緩存的目的。git

瀏覽器緩存方法有不少種，那麼下面咱們分別使用hash, chunkhash和contenthash來理解下。github

在理解hash, chunkhash和contenthash以前，咱們首先看看咱們項目的基本架構以下：web

### 目錄結構以下：
demo1                                       # 工程名
|   |--- dist                               # 打包後生成的目錄文件             
|   |--- node_modules                       # 全部的依賴包
|   |--- js                                 # 存放全部js文件
|   | |-- demo1.js  
|   | |-- main.js                           # js入口文件
|   |--- webpack.config.js                  # webpack配置文件
|   |--- webpack.dll.config.js              # 打包第三方依賴的庫文件
|   |--- index.html                         # html文件
|   |--- styles                             # 存放全部的css樣式文件   
|   | |-- main.styl                         # main.styl文件   
|   | |-- index.styl                        
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel轉碼文件

1. 理解使用hash
hash的默認長度爲20個字符，可使用[hash:8]這樣的方式來配置，表明hash使用8個字符來表示。json

webpack.config.js 配置代碼以下(入口文件分別爲main和demo1)：

module.exports = {
  // 入口文件
  entry: {
    main: './js/main.js',
    demo1: './js/demo1.js'
  },
  output: {
    filename: '[name].[hash].js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist')
  }
}

在dist目錄打包成以下：

如上能夠看到，main.js中hash編碼和demo1.js中的hash編碼是如出一轍的。如今我改下main.js代碼後，繼續打包一下能夠看到以下信息：

能夠看到，demo1.js代碼其實我並無改動，可是它由於main.js代碼改動了致使他的hash編碼也改變了。

hash理解爲：當每次修改任何一個文件後，全部文件打包後的hash值都是同樣的，因此假如只是修改了任何一個文件，整個項目的文件緩存都將失效。

hash爲何會這樣呢？要理解這個問題，首先咱們須要理解 the module identifier。webpack默認會爲各個模塊分配一個id做爲標識，用來處理模塊之間的依賴關係，可是默認的id命名規則則是根據模塊引入的順序，賦予一個整數 (1,2,3..). 因爲該hash是基於整個 module identifier序列計算獲得的，所以js打包的時候使用該hash，全部的值都同樣的，可是任意刪除或者修改任何一個文件的時候，都會對整個id序列形成影響，從而改變hash的值。

二：理解使用chunkhash

上面的hash有這個缺點，所以chunkhash出現了，它就是解決這個問題而出現的。咱們接下來再把配置改爲以下：

module.exports = {
  entry: {
    main: './js/main.js',
    demo1: './js/demo1.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist')
  }
};

咱們繼續運行打包完後，變成以下：

能夠看到這時候main.js和demo1.js中的hash編碼不同了，所以接下來咱們繼續隨便修改下main.js代碼，繼續打包以下：

如上能夠看到，咱們只是改變了下 main.js代碼，demo1.js代碼並無改變，所以main.js代碼的hash編碼值改變了，demo1.js的hash值編碼並無改變，所以當某個文件改變的時候，只會從新請求該文件，未改變的文件不會從新請求，會緩存裏面讀取。

三：對第三方庫打包後使用緩存

經過上面使用chunkhash, 所以對於一些經常使用的庫，第三方文件咱們也可使用chunkhash這麼作，這樣一來的話，第三方庫文件在瀏覽器中會加載很快，所以對於第三方庫文件我打算輸出到 項目中另外一個文件內，好比叫plugins文件夾內，好比以下webpack.dll.config.js 代碼以下：

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  // 入口文件
  entry: {
    // 項目中用到該兩個依賴庫文件
    jquery: ['jquery'],
    echarts: ['echarts']
  },
  // 輸出文件
  output: {
    // 文件名稱
    filename: '[name].dll.[chunkhash].js', 
    // 將輸出的文件放到dist目錄下
    path: path.resolve(__dirname, './plugins'),

    /*
     存放相關的dll文件的全局變量名稱，好比對於jquery來講的話就是 _dll_jquery, 在前面加 _dll
     是爲了防止全局變量衝突。
    */
    library: '_dll_[name]'
  },
  mode: 'development',
  plugins: [
    // 使用插件 DllPlugin
    new DllPlugin({
      /*
       該插件的name屬性值須要和 output.library保存一致，該字段值，也就是輸出的 manifest.json文件中name字段的值。
       好比在jquery.manifest文件中有 name: '_dll_jquery'
      */
      name: '_dll_[name]',

      /* 生成manifest文件輸出的位置和文件名稱 */
      path: path.join(__dirname, './plugins', '[name].manifest.json')
    })
  ]
};

webpack.config.js 代碼以下：

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 清除dist目錄下的文件
const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

// 引入HappyPack插件 
const HappyPack = require('happypack');

module.exports = {
  // 入口文件
  entry: {
    main: './js/main.js',
    demo1: './js/demo1.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: ['happypack/loader?id=css-pack']
        })
      },
      {
        test: /\.(png|jpg)$/,
        /*
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
        */
        use: ['happypack/loader?id=image']
      },
      {
        test: /\.js$/,
        // 將對.js文件的處理轉交給id爲babel的HappyPack的實列
        use: ['happypack/loader?id=babel'],
        // loader: 'babel-loader',
        exclude: path.resolve(__dirname, 'node_modules') // 排除文件
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.json']
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html' // 模版文件
    }),
    new ClearWebpackPlugin(['dist']),
    new ExtractTextPlugin({
      // 從js文件中提取出來的 .css文件的名稱
      filename: `main.[chunkhash].css`
    }),
    // 告訴webpack使用了哪些第三方庫代碼
    new DllReferencePlugin({
      context: path.join(__dirname),
      // jquery 映射到json文件上去
      manifest: require('./plugins/jquery.manifest.json')
    }),
    new DllReferencePlugin({
      context: path.join(__dirname),
      // echarts 映射到json文件上去
      manifest: require('./plugins/echarts.manifest.json')
    }),

    /****   使用HappyPack實例化    *****/
    new HappyPack({
      // 用惟一的標識符id來表明當前的HappyPack 處理一類特定的文件
      id: 'babel',
      // 如何處理.js文件，用法和Loader配置是同樣的
      loaders: ['babel-loader']
    }),
    new HappyPack({
      id: 'image',
      loaders: [{
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      }]
    }),
    // 處理styl文件
    new HappyPack({
      id: 'css-pack',
      loaders: ['css-loader']
    })
  ]
};

打包後變成以下：

第三方庫文件通常狀況下不會輕易更改，所以咱們在頁面上引用的時候，直接把hash編碼值帶上，當第二次瀏覽器訪問的時候，第三方庫文件會直接從緩存裏面讀取(除js緩存時間過時之外)，這樣的話，瀏覽器加載速度會更快。

四：contenthash

如上，第三方庫文件已經解決了使用緩存了，可是css文件並無，好比在main.js代碼內部應用了 main.styl， main.js代碼以下：

require('../styles/main.styl');

$('#app').html('歡迎你來個人博客');

console.log('這是main.js');
console.log(22333);   
require('./demo1.js');

以下圖所示：

main.js 和 main.css 的hash編碼是同樣，所以我如今繼續更改main.js, 隨便加一行代碼，而後繼續打包，會看到main.css的hash編碼也會跟着改變，其實main.css的文件並無更改，其實我是想main.css直接仍是使用緩存就好。
也就是說 更改那個文件，就對那個文件使用新的hash編碼。沒有更改過的文件，hash編碼不變。

main.js 代碼變爲以下：

require('../styles/main.styl');

$('#app').html('歡迎你來個人博客');

console.log('這是main.js');
console.log(22333);   
require('./demo1.js');

// 新增一行代碼
console.log(22333111);

而後繼續打包，以下圖所示：

也能夠看到main.css的hash編碼是跟着 main.js 編碼變更的。

其實根本緣由仍是 module identifier，由於 main.js 新引入的模塊main.styl, 它改變了之後全部模塊的 id 值，因此 main.css 文件中引入的模塊值發生了改變，因而 main.styl 的 chunkhash 也隨着發生改變。

爲了解決這個問題，contenthash就出來了。

首先要分離css，以前是使用 extract-text-webpack-plugin 插件，如今咱們爲了使用 contenthash，所以須要使用mini-css-extract-plugin插件就能夠了。具體配置代碼以下：

// 引入 mini-css-extract-plugin 插件 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    {
      // 使用正則去匹配
      test: /\.styl$/,
      /*
      use: ExtractTextPlugin.extract({
        fallback: {
          loader: 'style-loader'
        },
        use: [
          {
            loader: 'css-loader',
            options: {}
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-cssnext')(),
                require('cssnano')(),
                require('postcss-pxtorem')({
                  rootValue: 16,
                  unitPrecision: 5,
                  propWhiteList: []
                }),
                require('postcss-sprites')()
              ]
            }
          },
          {
            loader: 'stylus-loader',
            options: {}
          }
        ]
      })
      */
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {}
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [
              require('postcss-cssnext')(),
              require('cssnano')(),
              require('postcss-pxtorem')({
                rootValue: 16,
                unitPrecision: 5,
                propWhiteList: []
              }),
              require('postcss-sprites')()
            ]
          }
        },
        {
          loader: 'stylus-loader',
          options: {}
        }
      ]
    },
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'happypack/loader?id=css-pack'
      ]
      /*
      use: ExtractTextPlugin.extract({
        use: ['happypack/loader?id=css-pack']
      })
      */
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css'
    })
  ]
}

所以webpack.config.js 全部代碼以下：

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 引入 mini-css-extract-plugin 插件 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 清除dist目錄下的文件
const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

// 引入HappyPack插件 
const HappyPack = require('happypack');

module.exports = {
  // 入口文件
  entry: {
    main: './js/main.js',
    demo1: './js/demo1.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        /*
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
        */
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {}
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-cssnext')(),
                require('cssnano')(),
                require('postcss-pxtorem')({
                  rootValue: 16,
                  unitPrecision: 5,
                  propWhiteList: []
                }),
                require('postcss-sprites')()
              ]
            }
          },
          {
            loader: 'stylus-loader',
            options: {}
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'happypack/loader?id=css-pack'
        ]
        /*
        use: ExtractTextPlugin.extract({
          use: ['happypack/loader?id=css-pack']
        })
        */
      },
      {
        test: /\.(png|jpg)$/,
        /*
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
        */
        use: ['happypack/loader?id=image']
      },
      {
        test: /\.js$/,
        // 將對.js文件的處理轉交給id爲babel的HappyPack的實列
        use: ['happypack/loader?id=babel'],
        // loader: 'babel-loader',
        exclude: path.resolve(__dirname, 'node_modules') // 排除文件
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.json']
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html' // 模版文件
    }),
    new ClearWebpackPlugin(['dist']),
    /*
    new ExtractTextPlugin({
      // 從js文件中提取出來的 .css文件的名稱
      filename: `[name].[contenthash:8].css`
    }),
    */
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css'
    }),
    // 告訴webpack使用了哪些第三方庫代碼
    new DllReferencePlugin({
      context: path.join(__dirname),
      // jquery 映射到json文件上去
      manifest: require('./plugins/jquery.manifest.json')
    }),
    new DllReferencePlugin({
      context: path.join(__dirname),
      // echarts 映射到json文件上去
      manifest: require('./plugins/echarts.manifest.json')
    }),

    /****   使用HappyPack實例化    *****/
    new HappyPack({
      // 用惟一的標識符id來表明當前的HappyPack 處理一類特定的文件
      id: 'babel',
      // 如何處理.js文件，用法和Loader配置是同樣的
      loaders: ['babel-loader']
    }),
    new HappyPack({
      id: 'image',
      loaders: [{
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      }]
    }),
    // 處理styl文件
    new HappyPack({
      id: 'css-pack',
      loaders: ['css-loader']
    }),
    new webpack.HashedModuleIdsPlugin()
  ]
};

經過如上配置後，咱們再打包一下看下以下所示：

當我修改main.js代碼後，再進行打包，會生成文件以下，以下圖所示：

如今咱們繼續改下main.styl代碼，繼續打包，看是否main.css的hash編碼的變化，以下圖所示

如上咱們能夠看到修改main.styl後，main.js代碼的hash變化也發生變化了。

所以在打包js中，咱們須要使用 contenthash 就能夠了，配置文件以下：

module.exports = {
  // 入口文件
  entry: {
    main: './js/main.js',
    demo1: './js/demo1.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist')
  }
}

所以webpack.config.js全部代碼以下：

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 引入 mini-css-extract-plugin 插件 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 清除dist目錄下的文件
const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

// 引入HappyPack插件 
const HappyPack = require('happypack');

module.exports = {
  // 入口文件
  entry: {
    main: './js/main.js',
    demo1: './js/demo1.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        /*
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
        */
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {}
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-cssnext')(),
                require('cssnano')(),
                require('postcss-pxtorem')({
                  rootValue: 16,
                  unitPrecision: 5,
                  propWhiteList: []
                }),
                require('postcss-sprites')()
              ]
            }
          },
          {
            loader: 'stylus-loader',
            options: {}
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'happypack/loader?id=css-pack'
        ]
        /*
        use: ExtractTextPlugin.extract({
          use: ['happypack/loader?id=css-pack']
        })
        */
      },
      {
        test: /\.(png|jpg)$/,
        /*
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
        */
        use: ['happypack/loader?id=image']
      },
      {
        test: /\.js$/,
        // 將對.js文件的處理轉交給id爲babel的HappyPack的實列
        use: ['happypack/loader?id=babel'],
        // loader: 'babel-loader',
        exclude: path.resolve(__dirname, 'node_modules') // 排除文件
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.json']
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html' // 模版文件
    }),
    new ClearWebpackPlugin(['dist']),
    /*
    new ExtractTextPlugin({
      // 從js文件中提取出來的 .css文件的名稱
      filename: `[name].[contenthash:8].css`
    }),
    */
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css'
    }),
    // 告訴webpack使用了哪些第三方庫代碼
    new DllReferencePlugin({
      context: path.join(__dirname),
      // jquery 映射到json文件上去
      manifest: require('./plugins/jquery.manifest.json')
    }),
    new DllReferencePlugin({
      context: path.join(__dirname),
      // echarts 映射到json文件上去
      manifest: require('./plugins/echarts.manifest.json')
    }),

    /****   使用HappyPack實例化    *****/
    new HappyPack({
      // 用惟一的標識符id來表明當前的HappyPack 處理一類特定的文件
      id: 'babel',
      // 如何處理.js文件，用法和Loader配置是同樣的
      loaders: ['babel-loader']
    }),
    new HappyPack({
      id: 'image',
      loaders: [{
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      }]
    }),
    // 處理styl文件
    new HappyPack({
      id: 'css-pack',
      loaders: ['css-loader']
    }),
    // new webpack.HashedModuleIdsPlugin()
  ]
};

webpack.config.js 代碼如上配置，首先咱們先打包完成後，查看打包後的文件以下：

當咱們隨便改動下main.js文件，能夠看到以下對應main.js的hash編碼發生改動，以下代碼文件：

 

接着咱們繼續改動下main.styl文件中的代碼，能夠看到以下圖demo1.js和main.js的hash編碼並無改動，
只有main.css文件的hash編碼發生改動了，以下圖所示：

查看github上的代碼

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程