本文作者是组内同事 杜宁,目前负责美团外卖活动管理模块业务。

为什么静态资源要放在一个或者若干个独立的域名之下?我当时脑海中首先想到的就是为了动静分离,减轻web服务器压力,但是仔细一想不太对,如果仅是为了这个原因,大可不必启用那么多一级域名,用若干二级域名不是更好?于是带着这个疑问,拜访了搜索引擎。果然不出所料,原因不止这一个,现整理出来,作为备忘。

无webpack.config.js配置打包

  1. 快速构建package.json文件。npm init -y

  2. 安装webpack4及其命令行接口npm i webpack webpack-cli --save-dev

  3. package.json文件增加build参数

"scripts": { "build": "webpack"}
  1. 创建./src/index.js文件增加内容

console.log;
  1. 终端执行npm run build目录下多了一个./dist/main.js。这个文件是webpack./src/index.js的打包结果。

2004年Eric Evans
发表《领域驱动设计——软件核心复杂性应对之道》(Domain-Driven Design
–Tackling Complexity in the Heart of Software),简称Evans
DDD,领域驱动设计思想进入软件开发者的视野。领域驱动设计分为两个阶段:

查看了淘宝的官网

productiondevelopment模式

  1. 修改package.json文件的scripts字段

"scripts": { "dev": "webpack --mode development", "prod": "webpack --mode production"}
  1. 分别执行npm run devnpm run prod你会看到./dist/main.js不同的变化。production模式下,默认对打包的进行minification,Tree
    Shaking,scope
    hoisting等等操作。总之是让打包文件更小。development模式下,对打包文件不压缩,同时打包速度更快。

如果没指定任何模式,默认是production模式。

  • 1、以一种领域专家、设计人员、开发人员都能理解的通用语言作为相互交流的工具,在交流的过程中发现领域概念,然后将这些概念设计成一个领域模型;

  • 2、由领域模型驱动软件设计,用代码来实现该领域模型;

图片 1image.png图片 2image.png

ES6和React

  1. 安装对应依赖包npm i babel-core babel-loader babel-preset-env babel-preset-react --save-devnpm
    install –save react react-dom

  2. 新建.babelrc文件,进行相关配置

{ "presets": ["env", "react"]}
  1. 新建webpack.config.js文件,进行相关配置

module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] }};
  1. 新增./src/app.js以及修改./src/index.js``./src/app.js内容如下:

import React from "react";import ReactDOM from "react-dom";const App = () => { return ( <div> <p>海涛好帅呀!666</p> </div> );};export default App;ReactDOM.render(<App />, document.getElementById;

./src/index.js内容如下:

import App from "./App";
  1. 终端执行npm run prod

简单地说,软件开发不是一蹴而就的事情,我们不可能在不了解产品的前提下进行软件开发,在开发前,通常需要进行大量的业务知识梳理,而后到达软件设计的层面,最后才是开发。而在业务知识梳理的过程中,我们必然会形成某个领域知识,根据领域知识来一步步驱动软件设计,就是领域驱动设计的基本概念。而领域驱动设计的核心就在于建立正确的领域驱动模型。

1、启用新的一级域名,每次请求浏览器不会携带cookie。这对于cookie内容比较大,并且流量大的网站会省去不少宽带费用。同时这也解惑了为什么不用二三级域名。

使用html-webpack-plugin插件对html进行打包

新建./src/index.html文件,内容如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>webpack4入门-谢海涛</title></head><body> <div > </div></body></html>

安装依赖包。

npm i html-webpack-plugin html-loader --save-dev

修改webpack.config.js配置。

const HtmlWebPackPlugin = require("html-webpack-plugin");module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\.html$/, use: [ { loader: "html-loader", options: { minimize: true } } ] } ] }, plugins: [ new HtmlWebPackPlugin({ template: "./src/index.html", filename: "./index.html" }) ]};

终端执行npm run prod命令。你会看到项目多了个./dist/index.html文件。

图片 3image.png

2、动静分离。静态资源与动态内容分离,有利于部署于CDN。

使用webpack-dev-server插件

安装依赖包。npm i webpack-dev-server --save-dev

修改package.json文件。

"scripts": { "start": "webpack-dev-server --mode development --open", "prod": "webpack --mode production"}

修改webpack.config.js文件,新增devServer配置。

devServer: { contentBase: require.join(__dirname, "dist"), compress: true, port: 8033, host: "127.0.0.1",}

终端执行npm run start便可以启动webpack dev server

传统开发四层架构

3、HTTP协议对同一个域名的同时下载线程数有限制。主要是为了优化下载速度,防止同一域名下下载线程数过多,导致下载速度变慢。各个浏览器都会遵守这个规定,但是限制的数目可能不一致。基于这个原因,可将资源部署于不同的域名,以达到最大化并发下载。

使用Hot Module Replacement

Hot Module Replacement有针对React,Vue,Redux,Angular,样式等等。这里我们以React Hot Loader为例。

安装依赖包。

npm i react-hot-loader --save-dev

修改.babelrc文件,新增plugins选项。

{ "plugins": ["react-hot-loader/babel"]}

修改webpack.config.js文件。

const path = require;const HtmlWebPackPlugin = require("html-webpack-plugin"); const webpack = require('webpack'); // 新增module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\.html$/, use: [ { loader: "html-loader", options: { minimize: true } } ] } ] }, devtool: 'inline-source-map', plugins: [ new HtmlWebPackPlugin({ template: "./src/index.html", filename: "./index.html" }), new webpack.NamedModulesPlugin(), // 新增 new webpack.HotModuleReplacementPlugin() //新增 ], devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 8033, host: "127.0.0.1", hot: true // 新增 }};

修改./src/app.js文件内容如下:

import React from "react";import ReactDOM from "react-dom";import { hot } from 'react-hot-loader' // 新增const App = () => { return ( <div> <p>这是一个测试文件!真得是动态更新啊</p> <div>好棒棒啊</div> </div> );};export default hot; // 修改ReactDOM.render(<App />, document.getElementById;

终端执行npm run start便可以启动webpack dev server。然后修改./src/app.js看下效果。

图片 4image.png

浏览器的并发请求数目限制是针对同一域名的。意即,同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞,这就是为什么会有zhimg.com,

之类域名的原因。(这是其中一个原因,另一个主要原因是,向
请求资源会把 下本地的所有 cookie
发送过去,这是请求图片,js等资源不需要的,会造成很大的浪费,详情见

在传统模型中,对象是数据的载体,只有简单的getter/setter方法,没有行为。以数据为中心,以数据库ER设计作驱动。分层架构在这种开发模式下,可以理解为是对数据移动、处理和实现的过程。

图片 5image.png

以商家活动为例,首先设计数据库表配置

如图,有的请求会持续很长时间,如果把 img, css, js… 都放到

一个域名下面,其他请求就迟迟无法完成,浏览者看来就是『卡住了』。而把图片放到
之后,css和图片就可以并发请求了。

图片 6image.png

具体不同浏览器这个限制的数目

设计WmActPoi对象,只有简单的get和set属性方法

图片 7image.png

public class WmActPoi { private Long id; private String wmPoiId; private Integer startTime; private Integer endTime; public Long getId() { return id; } public void setId { this.id = id; } public Integer getWmPoiId() { return wmPoiId; } public WmActPoiDB setWmPoiId(Integer wmPoiId) { this.wmPoiId = wmPoiId; } ......}

4、静态资源独立部署,为全局产品服务。这属于业务划分的范畴了。比如taobao.com和tmll.com都会用到tbcdn.cn上的静态资源,这些资源不必从属于某个产品。

发表评论

电子邮件地址不会被公开。 必填项已用*标注