随笔分类 -  前端开发

1 2 下一页
前端技术
react18中antd的select选择器组件自定义下拉框的内容
摘要：效果如图 导入组件和图标 import { Select } from 'antd' import { ManOutlined, WomanOutlined } from '@ant-design/icons'; const { Option } = Select; 数据 let userListO 阅读全文
posted @ 2023-04-26 17:14 阿jin 阅读(1900) 评论(0) 推荐(0)
js中判断数据是否为数组的方法
摘要：Array.isArray( )，该方法返回一个布尔值 let arr = [1,2,3] Array.isArray(arr) // true 使用 instanceof 运算符判断是否为数组 let arr = [1,2,3] arr instanceof Array // true 使用 Ob 阅读全文
posted @ 2023-04-25 15:56 阿jin 阅读(95) 评论(0) 推荐(0)
react18中antd的Upload组件上传头像，并且拿到服务器返回的头像的url地址在页面中显示头像
摘要：业务需求：上传头像，上传完毕后拿到头像的url，把头像展示在页面中，最终把头像url和其他用户信息一起发送给服务器 上传头像流程 导入 Upload 组件和图标(一个加号，一个加载中) import { Upload } from 'antd'; import { PlusOutlined, Loa 阅读全文
posted @ 2023-04-22 14:48 阿jin 阅读(766) 评论(0) 推荐(0)
33-module
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { // 阅读全文
posted @ 2020-11-30 02:43 阿jin 阅读(56) 评论(0) 推荐(0)
33-webpack详细配置output
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { // 阅读全文
posted @ 2020-11-30 02:34 阿jin 阅读(75) 评论(0) 推荐(0)
32-webpack详细配置-entry
摘要：const HtmlWebpackPlugin = require('html-webpack-plugin') const {resolve} = require('path') /** * entry：入口起点 * 1. string --> './src/index.js' * 单入口 * 打 阅读全文
posted @ 2020-11-30 01:56 阿jin 阅读(65) 评论(0) 推荐(0)
31-dll
摘要：webpack.dll.js /** * 使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包 * 当你运行 webpack 时，默认查找 webpack.config.js 配置文件 * 需求：需要运行 webpack.dll.js 文件 * --> webpa 阅读全文
posted @ 2020-11-30 00:50 阿jin 阅读(75) 评论(0) 推荐(0)
30-externals（拒绝某些包被打包进来）
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: resolve(__dirname, 'src/js/inde 阅读全文
posted @ 2020-11-29 01:15 阿jin 阅读(52) 评论(0) 推荐(0)
29-多进程打包
摘要：const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require(' 阅读全文
posted @ 2020-11-29 01:02 阿jin 阅读(62) 评论(0) 推荐(0)
28-PWA
摘要：const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require(' 阅读全文
posted @ 2020-11-29 00:50 阿jin 阅读(223) 评论(0) 推荐(0)
27-lazy loading（懒加载和预加载）
摘要：懒加载 document.getElementById('btn').onclick = function () { // 懒加载：当文件需要使用时才加载 import(/* webpackChunkName: 'test' */ './test').then(({mul})=>{ console. 阅读全文
posted @ 2020-11-28 23:50 阿jin 阅读(249) 评论(0) 推荐(0)
26-code split
摘要：第一种：多入口 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // 单入口 // entry: './src/js/i 阅读全文
posted @ 2020-11-28 06:47 阿jin 阅读(68) 评论(0) 推荐(0)
25-tree shaking(树摇)
摘要：const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require(' 阅读全文
posted @ 2020-11-28 05:45 阿jin 阅读(385) 评论(0) 推荐(0)
24-缓存
摘要：const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require(' 阅读全文
posted @ 2020-11-28 05:41 阿jin 阅读(50) 评论(0) 推荐(0)
23.oneOf
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') // 提取css为单独文件 const MiniCssExtractPlugin = require('mini- 阅读全文
posted @ 2020-11-28 04:45 阿jin 阅读(63) 评论(0) 推荐(0)
22-source-map
摘要：const { resolve } = require('path') const htmlWebpackPlugins = require('html-webpack-plugin') module.exports = { entry: ['./src/js/index.js', './src/i 阅读全文
posted @ 2020-11-28 04:38 阿jin 阅读(130) 评论(0) 推荐(0)
21-HMR
摘要：/* HMR：hot module replacement 热模块替换 / 模块热替换 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 极大提升构建速度 样式文件：可以使用HMR功能：因为style-loader内部实现了~ JS文件：默认不能使用HMR功能 --> 需要修改j 阅读全文
posted @ 2020-11-28 03:47 阿jin 阅读(70) 评论(0) 推荐(0)
20-优化配置介绍、HMR
摘要：webpack性能优化 开发环境性能优化 生产环境性能优化 开发环境性能优化 优化打包构建速度 HMR 优化代码调试 source-map 生产环境性能优化 优化打包构建速度 oneOf babel缓存 多进程打包 externals dll 优化代码运行的性能 缓存(hash-chunkhash- 阅读全文
posted @ 2020-11-28 02:42 阿jin 阅读(77) 评论(0) 推荐(0)
19-生产环境基本配置
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') // 提取css为单独文件 const MiniCssExtractPlugin = require('mini- 阅读全文
posted @ 2020-11-28 02:27 阿jin 阅读(74) 评论(0) 推荐(0)
18-html压缩
摘要：const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: 阅读全文
posted @ 2020-11-27 22:11 阿jin 阅读(133) 评论(0) 推荐(0)

1 2 下一页