内容:这一节增加了一些额外的辅助工具【gzip
、缓存、favicon
、title
】;然后增加了生产环境的打包和运行命令。
1、 服务端使用 compression
开启 Gzip。
2、缓存策略
页面级别缓存,如果内容不是用户特定 (user-specific
)(即对于相同的 URL,总是为所有用户渲染相同的内容),我们可以利用名为 micro-caching
的缓存策略,来大幅度提高应用程序处理高流量的能力。
组件级别缓存,vue-server-renderer
内置支持组件级别缓存 (component-level caching
)。要启用组件级别缓存,你需要在创建 renderer
时提供具体缓存实现方式(cache implementation
)。典型做法是传入 lru-cache
。
3、使用 serve-favicon
中间件,从服务端来提供网页标签页的小 logo
。
4、动态 title
我们动态生成 title
,然后判断是服务端还是客户端,分别在各自对应的钩子函数,完成网页 title
的赋值操作(如果是服务端就在 created
钩子函数中,如果是客户端就是 mounted
钩子函数中)。然后使用 Vue.mixin()
将钩子函数混入。
4.1、Head 管理
使用相同的策略,你可以轻松地将此 mixin
扩展为通用的头部管理工具 (generic head management utility)。
5、新增构建打包以及运行 server 的命令
"scripts": {
"dev": "npm start",
"start": "nodemon server.js",
"server": "cross-env NODE_ENV=production node server",
"build": "rimraf dist && npm run build:client && npm run build:server",
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules",
"build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
}
课程 7 的开发运行步骤:
cd lesson7
# install dependencies
npm install
# serve in dev mode, with hot reload at localhost:8080
npm run dev
课程 7 构建以及 server 运行步骤:
# build for production(打生产环境的包)
npm run build
# serve in production mode(运行生产环境)
npm run server