京鸿一瞥 - 博客园

2020年12月11日

摘要：对axios进行基础配置 import axios from 'axios'; // 该处引入axios模块 // 构建axios实例 const instance = axios.create({ baseURL: process.env.BASE_API, // 该处url会根据开发环境进行变化阅读全文

posted @ 2020-12-11 14:36 京鸿一瞥阅读(1422) 评论(0) 推荐(0)

2020年12月10日

HTTP请求头及其作用

摘要： 1、Accept，浏览器端能够处理的内容类型。例如： Accept: text/html 代表浏览器可以接受服务器回发的类型为 text/html 也就是我们常说的html文档。如果服务器无法返回text/html类型的数据，服务器应该返回一个406错误(non acceptable)。通配符 * 阅读全文

posted @ 2020-12-10 18:24 京鸿一瞥阅读(2003) 评论(0) 推荐(0)

2020年12月6日

10、压缩 css

摘要：总结、css相关的 1、style-loader 是将 css 以 style 的形式写在页面 2、MiniCssExtractPlugin 可以将 css 从js中分离出来，以 link 的形式引入 3、css 的压缩看下面 css 的压缩有两款插件 css-minimizer-webpack- 阅读全文

posted @ 2020-12-06 01:02 京鸿一瞥阅读(303) 评论(0) 推荐(0)

2020年12月5日

9、css兼容性处理

摘要： 1、这里用到 postcss 和 postcss-preset-env postcss-loader npm i -D postcss postcss-loader postcss-preset-env postcss-preset-env 为 postcss 的预设环境 postcss 相当于一阅读全文

posted @ 2020-12-05 21:32 京鸿一瞥阅读(387) 评论(0) 推荐(0)

2020年12月4日

开始构造开发环境，8、提取css成单独文件

摘要：这里需要用到 mini-css-extract-plugin 插件 npm i -D mini-css-extract-plugin 引入插件 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module module 阅读全文

posted @ 2020-12-04 22:40 京鸿一瞥阅读(183) 评论(0) 推荐(0)

前端性能优化之 gzip压缩文件传输数据

摘要：一、文件压缩的好处前端生产环境中将js、css、图片等文件进行压缩的好处显而易见，通过减少数据传输量减小传输时间，节省服务器网络带宽，提高前端性能。二、http协议如何支持压缩文件的传输 1、浏览器请求数据时，通过Accept-Encoding说明自己可以接受的压缩方法 2、服务端接收到请求后，阅读全文

posted @ 2020-12-04 15:11 京鸿一瞥阅读(2706) 评论(0) 推荐(0)

Vue 项目性能优化实践

摘要：前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分，我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优阅读全文

posted @ 2020-12-04 14:54 京鸿一瞥阅读(202) 评论(0) 推荐(0)

7、 webpack 开发环境配置

摘要： const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'production', entry: './src/js/i 阅读全文

posted @ 2020-12-04 12:04 京鸿一瞥阅读(140) 评论(0) 推荐(0)

2020年12月3日

ES6—class与模块化

摘要： ES6中的模块功能主要由两个命令构成：export和import。 export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能，二者属于相辅相成、一一对应关系。一、什么是模块模块实质上是对业务逻辑分离实现低耦合高内聚，也便于代码管理而不是所有功能代码堆叠在一起，模块真正的阅读全文

posted @ 2020-12-03 15:21 京鸿一瞥阅读(224) 评论(0) 推荐(0)

2020年12月1日

6、webpack-dev-server

摘要： webpack.config.js 配置文件中下载 webpack-dev-server npm i -D webpack-dev-server 配置 package.json 文件增加启动命令便可以成功阅读全文

posted @ 2020-12-01 23:24 京鸿一瞥阅读(79) 评论(0) 推荐(0)