- 最新文章
-
webpack的代码分割配置代码,异步加载模块配置 需要在webpack.config.js配置中添加字段 optimization 首先在这里简单提一下 optimization 里面可以配置 tree shaking 添加usedExports: true即可 下面我们进入正题 只需要在optimization里面添加配置 splitChunks: { chunks: 'all' } 即可 代码分割 配置异步加载 可以在函数里面直接import('xxxx') $ sudo cnpm i -D babel-plugin-dynamic-import-webpack options: { "presets": [ "@babel/preset-env", "@babel/preset-react", ], plugins: ['dynamic-import-webpack'] }, -
webpack开启热更新模块 首先上代码 注意代码中的devServer 里面的hot、hotOnly都设置为true 拉下webpack的 HotModuleReplacementPlugin模块 然后实例化即可 const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const {CleanWebpackPlugin} = require('clean-webpack-plugin') const webpack = require('webpack') module.exports ={ mode: 'development', devServer: { hot: true, hotOnly: true, contentBase: path.resolve(__dirname, 'dist') }, entry: { main: './src/index.js' }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader' ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new CleanWebpackPlugin(), new webpack.HotModuleReplacementPlugin() ] }
-
-
webpack打包配置 我写这篇文章一来是为了巩固自己的学习 二来是为了更多的同学在学习webpack中有所收获 webpack安装分为两种 一种是全局安装global 一种是局部安装local 我个人觉得我比较喜欢使用局部安装。不管然和插件 全局暗转只需要执行 npm install webpack webpack-cli -g 安装完成之后就可以是看到版本号了 webpack -v 本地安装命令一样不需要加-g 本地安装的同学大家使用webpack一定会报错 not fount webpack 因为我们没有全局安装所以在执行webpack的时候没有找到 很正常 原理很简单在termainal中执行webpack 的时候是全局的webpack 这个时候我们就可以使用npx webpack了 npx是执行局部的webpack 下面我们来看一看webpack如何使用 第一种方法是 直接执行npx webpack index.js 可以看到打包了一个js文件 第二种方法是配置一个webpack.config.js 里面的配置大家可以跟我一起写 我就不用代码高亮了，这个代码高亮的编辑器使用太麻烦。自己也懒得改 直接写了，写一句我会解释一句 const path = require('path') 这一句的意思是引入nodejs的path模块因为我们后面会使用到 module.exports = { mode: 'production', 这一句的意思是 告诉webpack我们要使用什么模式 有生产模式 和开发模式 分别为production and development entry: { main: './src/index.js', sub: 'xxx.js' } 这一句的意思是 告诉webpack 我们要从什么文件开始打包，我这里填写为src目录下面的index.js文件开始, 如果为对象即是打包多个文件的意思 output: { 这里面填写打包完成的文件放到什么地方 filename: 'mian.js', 这一句意思是打包完成后文件叫main.js path: path.resolve(__dirname, 'dist') 这一句的意思是打包好的文件放到什么路径，我们这里填写dist目录下 }, module: { 这里面是告诉webpack我们如何打包除了js以外的文件 rules: [ 这里面填写相应的规则 { test: /\.png$/, 这一句的意思是要对png文件作出处理 use: { loader: 'file-loader', 这里是告诉webpack 我们要处理的png使用file-loader模块处理 name: '[hash]_[name].[ext]', 这里是告诉webpack 我们需要输出的名称 outputPath: 'images/', 这里我们告诉webpack我们这个文件要输出的地址 } }, { test: /\.scss/, 这里设置sass文件打包设置 use: [ 'style-loader', 'css-loader', 'sass-loader', 'postcss-loader' 这个loader的意思是要将打包的css进行浏览器适配处理 ] } ] }, plugins: [ new HtmlWebpackplugin([ template: '/src/index.html' 这里是设置模版文件 ]), new CleanWebpackPlugin() 这个插件是帮助我们自动清理打包目录的 ] }
-
BFF中间层 中间层 目前我发现的最大的改良架构的通解 就是增加中间层。 比方说 前后端分离，使用 node 来做BFF（backend for frontend），实际上就是在传统前后端 增加了 node这一层，通过此有两点好处，一个是前端彻底接管了 view 层，后端渲染也开始全部由前端掌控，另一个就是 接口层 增加了一层。 BFF 的前端接口层 我称之为前端接口层，众所周知，后端接口返回的数据往往是不适合前端使用，因为后端的数据是来自于领域建模，而前端作为数据的消费者，所想要的数据其实是 ui数据，无论是数据的含义、还是需要的数据种类、数据结构都往往有巨大的改变，所以我们需要做 数据转换。 service 层 如果把这些数据转换 集中式处理的时候，通常会称之为 service 层。在有 node 之前 这个 service层实际上是在前端完成的，这有时候会导致严重的性能问题， 性能上 比方用户的一个点击事件，我们需要三种数据源，并且数据源之间互相依赖，这时候，我们必须异步串行的请求数据，一个交互事件所需的等待耗时大大加剧。 其次，复用和缓存 很难做，比方说跨页面的 相同service 需求。 在 node 端 实现的 BFF 的前端接口层实际上还是 service 层，只不过 service 层 是在服务器上运行的，缓存就很好利用起来了，比方说，A 需要 一种service，B 也需要相同的 service ，又恰好 A、B 的输入 key 相同，则这个 service的结果可以缓存起来，并且被复用。 开发上 BFF 的 service 层，可以很容易做到应用级别的复用。 还有很重要的一点是，解耦。 假如没有 service层，我们可以想象，当后端数据源发生了改变，那么前端页面也需要改变，当然，我们通常会要求后端数据源不变，但是总有万一，一旦数据源发生改变，由于前端页面是紧密耦合到数据接口的，所以需要改动的地方非常之多。但是在这种情况下，如果我们有数据转换这一层，实际上在这一层改改，保证前端消费的数据格式不变，即可应对这次数据源的变化。 缓存 上面提到了缓存，其实，缓存也是中间层的一个显著代表，它就是 数据源 和 数据消费者 中间的一层。只不过它的用途不是 fordev 而是 for performance。 缓存的思想在计算机领域被广泛应用，cpu、内存、外存、web 后端开发、web 前端开发，实际上我们也可以理解成 中间层在计算机领域被广泛利用，最著名的还包括 计算机网络 五层模型。 总结 以上只是我罗列的几点，实际上我觉得，基本上中间层的意义 就在于 开发上的复用和解耦、性能上的提升（其实缓存也就是在复用）。
-
-
私有Docker的搭建 首先我们最好有一台Linux的服务器 然后我们到docker hub 上面搜索registry 找到命令 docker run -d -p 5000:5000 --restart always --name registry registry:2 然后复制粘贴 后面我们打开服务器添加doemon.json文件到/etc/docker/目录下 内容大约可以为 { "insecure-registries":["129.28.193.114:5000"] } 虽然不安全但是注册了的地址 然后到文件/lib/systemd/system/docker.service中添加一句话 EnvironmentFile=-/etc/docker/doemon.json 最后我们重启docker程序即可 sudo service docker restart
-
Dockerfile的基本语法 FROM FROM scratch 制作base image FROM centos 制作base image FROM ubuntu:14.04 LABEL LABEL maintainer='admin@zyt8.cn' LABEL version='v1.0' LABEL description='this is zhangyutong blog' RUN RUN yum update && yum install vim 为了避免多余的无用layer尽量合并为一行代码 WORKDIR WORKDIR /root 用WORKDIR改变当前工作目录，如果根目录没有root将会自动创建root 其实WORKDIR 和 RUN cd 一样 但是尽量使用WORKDIR ADD and COPY ADD hello / 将hello可执行程序add到image的根目录 ADD hello.tar.gz / 添加到根目录并且解压缩 ENV ENV MYSQL_VISION 5.4 定义一个常量 RUN and CMD RUN 是执行命令并且创建新的image layer CMD 是设置容器启动后默认设置的命令和参数 ENTRYPOINT 是设置容器启动时运行的命令
-
ant-design下载二进制字节流文件 今天在做一个项目的时候遇到了一个问题。 其实下在文件是很简单的一件事情。但是使用到前后分离的这个概念，下载文件就变得稍微有一点点复杂了。 因为用户使用的是前端路由。而不能够直接使用后端的路由 所有任何操作都要通过API来实现 这样的话即使服务器上面有文件也很难下载。 因为链接不能够直达 所有我就用服务器返回我们需要下载文件的二进制字节流格式 然后在前端直接下载即可。但是由于经过前端的一层layer所以最好就是下载小文件。大文件就不必使用这种方法了 首先我们在前端ant-design中新建一个路由 export async function download(id) { return request(`/api/testadmin/download_template/${id}`,{ responseType : 'blob' }) } 注意⚠️responseType一定要为blob 然后在模型中写一个方法effect *_download({ id }, { call }) { return yield call(download, id) } 然后就可以直接下载保存了 if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(temp_data, '项目必要文件.zip'); } else { const link = document.createElement('a'); const evt = document.createEvent('MouseEvents'); link.style.display = 'none'; link.href = window.URL.createObjectURL(temp_data); link.download = '项目必要文件.zip'; document.body.appendChild(link); // 此写法兼容可火狐浏览器 evt.initEvent('click', false, false); link.dispatchEvent(evt); document.body.removeChild(link); } 后端的代码我就不贴了
-
docker笔记-命令篇 docker 基础命令 docker run imageName # 运行一个image容器 docker build -t ImageName . # 意思是在当前目录下寻在Dockerfile文件并且编译 docker image ls # 列出所有image docker container ls -a # 列出已经退出的container docker container ls # 列出运行中的container docker container rm containerName # 移除一个container docker rm containerName # 是docker container rm containerName 简写 docker image rm imageName # 移除一个image docker rmi imageName # 移除一个image 是 docker image rm imageName 的简写 docker ps # 和docker container ls 一个意思 docker container ls -aq # 列举出来所有container的ID docker ps -aq # 是docker container ls -aq的简写 docker container rm $(docker container ls -aq) # 清楚所有container docker commit containerName newContainerName # 将container提交成新的image