傻傻分不清的Manifest

栏目: 编程语言 · 发布时间: 5年前

内容简介：在前端，说到下面我们来一一介绍下浏览器解析这段html标签时，就会去访问

在前端，说到 manifest ，其实是有歧义的，就我了解的情况来说， manifest 可以指代下列含义：

  1. html 标签的 manifest 属性: 离线缓存 （目前已被废弃）
  2. PWA : 将Web应用程序安装到设备的主屏幕
  3. wbbpack中 webpack-manifest-plugin 插件打包出来的 manifest.json 文件，用来生成一份资源清单，为后端渲染服务
  4. webpack中 DLL 打包时,输出的 manifest.json 文件，用来分析已经打包过的文件，优化打包速度和大小

下面我们来一一介绍下

html属性

<!DOCTYPE html>
<html lang="en" manifest="/tc.mymanifest">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/theme.css">
  <script src="/main.js"></script>
  <script src="/main2.js"></script>
</head>
<body>
 
</body>

</html>

浏览器解析这段html标签时，就会去访问 tc.mymanifest 这个文件，这是一个缓存清单文件

tc.mymanifest 

# v1 这是注释
CACHE MANIFEST
/theme.css
/main.js

NETWORK:
*

FALLBACK:
/html5/ /404.html

CACHE MANIFEST 指定需要缓存的文件，第一次下载完成以后，文件都不会再从网络请求了，即使用户不是离线状态，除非 tc.mymanifest 更新了，缓存清单更新之后，才会再次下载。标记了manifest的html本身也被缓存

NETWORK 指定非缓存文件，所有类似资源的请求都会绕过缓存，即使用户处于离线状态，也不会读缓存

FALLBACK 指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。

比如离线访问/html5/目录时，就会用本地的/404.html页面

缓存清单可以是任意后缀名，不过必须指定 content-type 属性为 text/cache-manifest

那如何更新缓存？一般有以下几种方式：

  • 用户清空浏览器缓存
  • manifest 文件被修改(即使注释被修改)
  • 由程序来更新应用缓存

需要特别注意：用户第一次访问该网页，缓存文件之后，第二次进入该页面，发现 tc.mymanifest 缓存清单更新了，于是会重新下载缓存文件，但是， 第二次进入显示的页面仍然执行的是旧文件，下载的新文件，只会在第三次进入该页面后执行！！！

如果希望用户立即看到新内容，需要js监听更新事件，重新加载页面

window.addEventListener('load', function (e) {

  window.applicationCache.addEventListener('updateready', function (e) {

    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // 更新缓存
      // 重新加载
      window.applicationCache.swapCache();
      window.location.reload();

    } else {

    }

  }, false);

}, false);

建议对 tc.mymanifest 缓存清单设置永不缓存

不过，manifest也有很多 缺点 ，比如需要手动一个个填写缓存的文件，更新文件之后需要二次刷新，如果更新的资源中有一个资源更新失败了，将导致全部更新失败，将用回上一版本的缓存

HTML5规范也废弃了这个属性，因此不建议使用

PWA

为了实现PWA应用添加至桌面的功能，除了要求站点支持HTTPS之外，还需要准备 manifest.json 文件去配置应用的图标、名称等信息 

<link rel="manifest" href="/manifest.json">
{ 
"name" : "Minimal PWA" , 
"short_name" : "PWA Demo" , 
"display" : "standalone" , 
"start_url" : "/" , 
"theme_color" : "#313131" , 
"background_color" : "#313131" , 
"icons" : [ 
  {
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }
 ] 
}

通过一系列配置，就可以把一个PWA像APP一样，添加一个图标到手机屏幕上，点击图标即可打开站点

基于webpack的react开发环境

本文默认你已经了解最基本的webpack配置，如果完全不会，建议看下这篇 文章

我们首先搭建一个最简单的基于webpack的react开发环境

源代码地址： https://github.com/deepred5/l... 

mkdir learn-dll
cd learn-dll

安装依赖

npm init -y
npm install @babel/polyfill react react-dom --save
npm install webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react add-asset-html-webpack-plugin autoprefixer babel-loader clean-webpack-plugin css-loader html-webpack-plugin mini-css-extract-plugin node-sass postcss-loader sass-loader style-loader --save-dev

新建 .bablerc 

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage", // 根据browserslis填写的浏览器，自动添加polyfill
        "corejs": 2,
      }
    ],
    "@babel/preset-react" // 编译react
  ],
  "plugins": []
}

新建 postcss.config.js 

module.exports = {
  plugins: [
    require('autoprefixer') // 根据browserslis填写的浏览器，自动添加css前缀
  ]
}

新建 .browserslistrc 

last 10 versions
ie >= 11
ios >= 9
android >= 6

新建 webpack.dev.js (基本配置不再详细介绍) 

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
  },
  devServer: {
    historyApiFallback: true,
    overlay: true,
    port: 9001,
    open: true,
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        use: ['style-loader',
          'css-loader',
          'postcss-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: ['style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: false,
              importLoaders: 2
            }
          },
          'sass-loader',
          'postcss-loader'
        ],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }), // index打包模板
  ]
}

新建 src 目录，并新建 src/index.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>learn dll</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

新建 src/Home.js 

import React from 'react';
import './Home.scss';

export default () => <div className="home">home</div>

新建 src/Home.scss 

.home {
  color: red;
}

新建 src/index.js 

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import Home from './Home';

class Demo extends Component {
  render() {
    return (
      <Home />
    )
  }
}

ReactDom.render(<Demo/>, document.getElementById('app'));

修改 package.json 

"scripts": {
  "dev": "webpack-dev-server --config webpack.dev.js"
},

最后，运行 npm run dev ，应该可以看见效果

新建 webpack.prod.js 

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, // 单独提取css文件
          'css-loader',
          'postcss-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            modules: false,
            importLoaders: 2
          }
        },
          'sass-loader',
          'postcss-loader'
        ],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css',
      chunkFilename: '[id].[contenthash:8].css',
    }),
    new CleanWebpackPlugin(), // 打包前先删除之前的dist目录
  ]
};

修改 package.json ，添加一句 "build": "webpack --config webpack.prod.js"

运行 npm run build ，可以看见打包出来的 dist 目录

html,js,css都单独分离出来了

傻傻分不清的Manifest

至此，一个基于webpack的react环境搭建完成

webpack-manifest-plugin

通常情况下，我们打包出来的js,css都是带上版本号的，通过 HtmlWebpackPlugin 可以自动帮我们在 index.html 里面加上带版本号的js和css 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>learn dll</title>
<link href="main.198b3634.css" rel="stylesheet"></head>
<body>
  <div id="app"></div>
<script type="text/javascript" src="main.d312f172.js"></script></body>
</html>

但是在某些情况， index.html 模板由后端渲染，那么我们就需要一份打包清单，知道打包后的文件对应的真正路径

安装插件 webpack-manifest-plugin

npm i webpack-manifest-plugin -D

修改 webpack.prod.js 

const ManifestPlugin = require('webpack-manifest-plugin');
module.exports = {
    // ...
    plugins: [
      new ManifestPlugin()
    ]
};

重新打包，可以看见 dist 目录新生成了一个 manifest.json 

{
  "main.css": "main.198b3634.css",
  "main.js": "main.d312f172.js",
  "index.html": "index.html"
}

比如在SSR开发时，前端打包后，node后端就可以通过这个json数据，返回正确资源路径的html模板

const buildPath = require('./dist/manifest.json');

res.send(`
  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ssr</title>
<link href="${buildPath['main.css']}" rel="stylesheet"></head>
<body>
  <div id="app"></div>
<script type="text/javascript" src="${buildPath['main.js']}"></script></body>
</html>
`);

代码分割

我们之前的打包方式，有一个缺点，就是把业务代码和库代码都统统打到了一个 main.js 里面。每次业务代码改动后， main.js 的hash值就变了，导致客户端又要重新下载一遍 main.js ，但是里面的库代码其实是没改变的！

通常情况下， react react-dom 之类的库，都是不经常改动的。我们希望单独把这些库代码提取出来，生成一个 vendor.js ，这样每次改动代码，只是下载 main.js ， vendor.js 可以充分缓存(也就是所谓的代码分割code splitting)

webpack4自带 代码分割 功能，只要配置: 

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

webpack.prod.js 

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            modules: false,
            importLoaders: 2
          }
        },
          'sass-loader',
          'postcss-loader'
        ],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css',
      chunkFilename: '[id].[contenthash:8].css',
    }),
    new CleanWebpackPlugin(),
    new ManifestPlugin()
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

重新打包，发现新生成了一个 vendor.js 文件，公用的一些代码就被打包进去了

傻傻分不清的Manifest

重新修改 src/Home.js ,然后打包，你会发现 vendor.js 的hash没有改变，这也是我们希望的

DLL打包

上面的打包方式，随着项目的复杂度上升后，打包速度会开始变慢。原因是，每次打包，webpack都要分析哪些是公用库，然后把他打包到 vendor.js 里

我们可不可以在第一次构建 vendor.js 以后，下次打包，就直接跳过那些被打包到 vendor.js 里的代码呢？这样打包速度可以明显提升

这就需要 DllPlugin 结合 DllRefrencePlugin 插件的运用

dll打包原理就是：

  1. 把指定的库代码打包到一个 dll.js ,同时生成一份对应的 manifest.json 文件
  2. webpack打包时，读取 manifest.json ,知道哪些代码可以直接忽略，从而提高构建速度

我们新建一个 webpack.dll.js 

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    vendors: ['react', 'react-dom'] // 手动指定打包哪些库
  },
  output: {
    filename: '[name].[hash:8].dll.js',
    path: path.resolve(__dirname, './dll'),
    library: '[name]'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DllPlugin({
      path: path.join(__dirname, './dll/[name].manifest.json'), // 生成对应的manifest.json，给webpack打包用
      name: '[name]',
    }),
  ],
}

添加一条命令:

"build:dll": "webpack --config webpack.dll.js"

运行dll打包

npm run build:dll

发现生成一个 dll 目录

傻傻分不清的Manifest

修改 webpack.prod.js 

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            modules: false,
            importLoaders: 2
          }
        },
          'sass-loader',
          'postcss-loader'
        ],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css',
      chunkFilename: '[id].[contenthash:8].css',
    }),
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, './dll/vendors.manifest.json') // 读取dll打包后的manifest.json，分析哪些代码跳过
    }),
    new CleanWebpackPlugin(),
    new ManifestPlugin()
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

重新 npm run build ，发现 dist 目录里， vendor.js 没有了

这是因为 react , react-dom 已经打包到 dll.js 里了， webpack 读取 manifest.json 之后，知道可以忽略这些代码，于是就没有再打包了

但这里还有个问题，打包后的 index.html 还需要添加 dll.js 文件，这就需要 add-asset-html-webpack-plugin 插件

npm i add-asset-html-webpack-plugin -D

修改 webpack.prod.js 

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const webpack = require('webpack');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            modules: false,
            importLoaders: 2
          }
        },
          'sass-loader',
          'postcss-loader'
        ],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, './dll/*.dll.js') }), // 把dll.js加进index.html里，并且拷贝文件到dist目录
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css',
      chunkFilename: '[id].[contenthash:8].css',
    }),
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, './dll/vendors.manifest.json') // 读取dll打包后的manifest.json，分析哪些代码跳过
    }),
    new CleanWebpackPlugin(),
    new ManifestPlugin()
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

重新 npm run build ，可以看见 dll.js 也被打包进 dist 目录了，同时 index.html 也正确引用 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>learn dll</title>
<link href="main.198b3634.css" rel="stylesheet"></head>
<body>
  <div id="app"></div>
<script type="text/javascript" src="vendors.8ec3d1ea.dll.js"></script><script type="text/javascript" src="main.0bc9c924.js"></script></body>
</html>

傻傻分不清的Manifest

小结

我们介绍了4种 manifest 相关的前端技术。 manifest 的英文含义是 名单 , 4种技术的确都是把 manifest 当做清单使用：

  1. 缓存清单
  2. PWA清单
  3. 打包资源路径清单
  4. dll打包清单

只不过是在不同的场景中使用特定的清单来完成某些功能

所以，学好英文是多么重要，这样才不会傻傻分不清 manifest 到底是干啥的！


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
代码

代码

劳伦斯・莱斯格 / 李旭 / 中信出版社 / 2004-10-1 / 30.00元

劳伦斯·莱斯格的著作《代码》 问世便震动了学界和业界，被人称为“也许是迄今为止互联网领域最重要的书籍”，也被一些学者称为“网络空间法律的圣经”。 《代码》挑战了早期人们对互联网的认识，即技术已经创造了一个自由的环境，因而网络空间无法被规制——也就是说，网络的特性使它押脱了政府的控制。莱斯格提出，事实恰恰相反。 代码的存在证明，网络并不是本制拷贝 ，不可规制的，它并没有什......一起来看看 《代码》 这本书的介绍吧!

码农工具
在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3