- 再新机器上安装 pycharm 同步服务器
- OSI 七层模型，TCP/IP 网络模型
- webpack 5个视频
OSI 七层模型
| 层级 | 名称 | 作用 |
|---|---|---|
| 第一层 | 物理层 | 规定电气信号，负责比特流的传输 |
| 第二层 | 数据链路层 | 链路的建立，拆除，分离；将数据分装成帧；差错检测和恢复（数据帧） |
| 第三层 | 网络层 | 路由和寻址；流量控制（数据包） |
| 第四层 | 传输层 | 提供了主机应用程序进程之间端到端的服务（数据段） |
| 第五层 | 会话层 | 建立，维护，终止链接；用户识别；登录 |
| 第六层 | 表示层 | 数据的表现形式，把应用层的数据转换成通用的数据格式；加密 |
| 第七层 | 应用层 | 用户接口 |
前端性能优化
- CDN：全局的负载均衡和缓存系统 服务器根据用户的地址查到相对较近，比负载较低的边缘节点，返回资源
缓存：命中率，回源率
webpack
webpack 的生产环境配置
/**
* webpack.config.js webpack 的配置文件
* 作用： 指示 webpack 干那些活
*
* 所有构件工具都是基于nide.js平台运行的~模块化默认采用common.js
*/
// 使用 resolve 来拼接绝对路径
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const O = require('optimize-css-assets-webpack-plugin')
// 定义 nodejs 的环境变量？
process.env.NODE_ENV = 'production'
module.exports = {
entry: './src/index.js',
output: {
// 输出的文件名
filename: 'js/built.js',
// 输出的路径 __dirname nodejs的变量，代表当前的目录绝对路径
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 将 css 样式通过在 html 文件中创建 style 标签来插入
// 'style-loader',
// 将 css 抽离成一个单独的文件
MiniCssExtractPlugin.loader,
'css-loader',
// 通过 postcss-loader 来做浏览器兼容性处理
{
loader: 'postcss-loader',
ident: 'postcss',
plugins: () => [
require('post-preset-env')()
]
}
]
},
{
test: /\.less$/,
use: [
// 将 css 样式通过在 html 文件中创建 style 标签来插入
// 'style-loader',
// 将 css 抽离成一个单独的文件
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
ident: 'postcss',
plugins: () => [
require('post-preset-env')()
]
},
'less-loader'
]
},
// 在 package.json 中 eslintConfig --> airbnb
{
test: /\.js$/,
// 处理同一种类型的文件时，强制优先执行的 loader
enforce: 'pre',
excludes: /node_modules/,
loader: 'eslint-loader',
options: {
fix: true
}
},
// 对 js 做浏览器的兼容性处理
{
test: /\.js$/,
excludes: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firfox: '50'
}
}
]
]
}
},
{
test: /\.(jgp|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs'
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
},
// plugins 配置
plugins: [
// 详细的 plugins 配置
new HtmlWebpackPlugin({
template: './src/index.html',
// html 的压缩
minify: {
// 空格压缩
collapseWhitespace: true,
// 删除注释
removeComments: true
}
}),
// 将 css 文件抽离成单独的文件
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
new O(),
],
mode: 'production'
}
webpack 性能优化
开发环境
- 优化打包的构建速度
- 优化代码调试
- HMR（Hot Module Replacement）模块热替换
一个模块发生变化，只会重新打包这一个模块而是不是所有的模块
只需要在 devServer: {hot: true} 即可
但是 css 默认可以，因为 style-loader 帮我们干了这件事，但是 js，html 如不能热更新了
我们可以在入口文件中加上（index.html）来解决热更新的问题，但是这样的话，又会将所有模块重新打包
js 文件的话我们只能在入口文件对引入的文件做如下处理：
if (moudle.hot) {
moudle.hot.accept('./print.js', function(){
// 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
print()
})
}
- source-map 一种提供源代码到构建后代码的映射技术（如果构件化代码出错，通过构件关系追踪到源代码的错误），在
webpack.config.js中添加devtool: 'source-map'即可
devtool: [inline-|hidden-|eval-][nosources-][cheap-[moudle-]]source-map
source-map: 准确的通知错位的位置
inline-source-map: 映射关系直接生成在打包的js文件中，而且只生成一个内联信息，优点就是打包块
hidden-source-map: 在外部生成一个映射关系文件，错误代码的位置是打包后的代码，不能追踪到源代码
eval-source-map: 也是内联，但是是每个文件会生成一个映射关系，
- 使用 oneof，这样可以使每个文件都命中一个 loader，而不是每个 loader 都过一遍，如果想要多个 loader 处理，可以将其提取到 oneof 外面
生产环境
- 优化打包的构建速度
- 优化代码运行的性能
