![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
框架插件工具篇
文章平均质量分 54
对前端常用的框架、插件及工具的整理
loushumei
这个作者很懒,什么都没留下…
展开
-
认识Babel ***
Babel是什么?用于解析ES6,甚至比ES6更高级的语法,到ES5或ES4级别,满足浏览器的兼容性环境搭建 & 基本配置① package.json配置安装:"devDependencies": { "@babel/cli": "^7.7.5", "@babel/core": "^7.7.5", "@babel/preset-env": "^7.7.5" "@babel/plugin-transform-runtime": "^7.7.5",},"dependencie原创 2021-02-04 19:12:29 · 257 阅读 · 0 评论 -
Webpack性能优化「七」-- 优化产出代码 ***
本篇讲的是 Webpack 对于优化产出代码,也就是对于产品性能的优化,优点:代码体积更小;合理分包不重复加载;速度更快,内存使用更少。懒加载 import提取公共代码IgnorePlugin 避免引入无用模块小图片base64编码 // 减少请求次数bundle加hash使用 CDN加速使用 productionScope Hosting 作用域提升小图片base64编码 减少请求次数webpack.prod.js:module: { rules: [ // 图原创 2021-02-03 18:54:09 · 437 阅读 · 1 评论 -
Webpack性能优化「六」-- 优化打包构建速度 ***
本篇讲的是 Webpack 对于优化打包构建速度,也就是对于开发体验和效率的优化。有如下几处可以优化:优化 babel-loaderIgnorePlugin 避免引入无用模块noParse 避免重复打包happyPack //多进程打包工具ParalleUglifyPlugin //多进程打包压缩自动刷新热更新DLLPlugin1.优化 babel-loader在babel-loader后加cacheDirectory,开启缓存,没有改动的es6代码会启用缓存,不会重新编译[w原创 2021-02-02 19:01:03 · 802 阅读 · 0 评论 -
Webpack高级配置「五」-- 懒加载 & 处理JSX & 处理vue ***
1.懒加载abc.js 文件中定义数据:export default { message: "this is dynamic data"}动态引入数据 - 实现懒加载:setTimeout(() => { import('./abc.js').then(res => { console.log(res.message) })}, 1500);最后产出一个独立的js,等同于定义一个chunk2.处理JSX修改 .babelrc 配置为:"presets"原创 2021-01-21 16:15:51 · 245 阅读 · 0 评论 -
Webpack高级配置「四」-- 抽离公共代码和第三方模块 ***
为什么要抽离公共模块、第三方模块?多入口打包时引入公共部分,公共部分会进行重复打包,打包效率降低,打包文件体积变大;第三方模块不会改变,但页面发生任何变动,第三方模块都需要重新打包,通过抽离第三方模块,页面变动时命中缓存,只打包开发部分代码,提升打包性能。1. 将第三方模块、公共模块分别打包为chunk将第三方模块、公共模块分别打包,分别产出对应的chunk,以便按需引用;将两者均放在cacheGroups做缓存分组中,将包作为缓存使用,避免重复打包;optimization.splitC原创 2021-01-20 19:39:25 · 942 阅读 · 0 评论 -
Webpack高级配置「三」-- 抽离CSS文件并压缩
本地开发环境不需要压缩css,配置保持不变;生产中压缩css可以优化产出代码,故只在生产环境进行css压缩;在开发和生产分别配置如下:1.在生产配置中配置css抽离压缩加载:抽离css文件:安装分离css插件 mini-css-extract-plugin在plugins中 新增 抽离css文件的 配置压缩css文件:安装压缩css插件 terser-webpack-plugin、optimize-css-assets-webpack-plugin在optimization中 新原创 2021-01-19 18:17:12 · 213 阅读 · 0 评论 -
Webpack高级配置「二」-- 配置多入口
1.js文件 多入口配置:在公共配置中配置多入口[webpack.common.js]:entry: { index: path.join(srcPath, 'index.js'), other: path.join(srcPath, 'other.js')},生产环境配置多出口[webpack.prod.js]:output: { // filename: 'bundle.[contentHash:8].js', // 单入口配置打包代码时,加上 hash 戳 filen原创 2021-01-19 17:09:21 · 211 阅读 · 0 评论 -
Webpack「一」-- 基本配置
1.拆分配置和mergewebpack配置文件拆分为:webpack.common.js 存放公共配置webpack.dev.js 存放开发环境配置webpack.prod.js 存放生产环境配置开发环境 和 生产环境 分别引入 webpack.common.js:安装webpack-merge以用来引入webpack.common.js:const webpackCommonConf = require('./webpack.common.js')const { merge } = req原创 2021-01-18 21:08:03 · 143 阅读 · 0 评论 -
前端常用的开发环境核心内容整理[ git | chrome | h5抓包 | webpack | linux ]
一、Git 代码版本管理工具1.常用的git服务器github | coding.net(码云)2.git的常用命令git init [project-name] //新建一个目录,将其初始化为Git代码库 git clone [url] //下载一个项目和它的整个代码历史git add . //将工作区的“新建/修改”添加到暂存区git checkout xxx // 恢复暂存区的指定文件到工作区git commit -m "xxx" //将暂存区的内容提交到本地库git stat原创 2020-06-02 21:27:04 · 247 阅读 · 0 评论 -
NodeJs入门(二)--用nodejs搭建一个简单的web服务器
前言 初入node的小白,可能还是对node一头雾水,那么本节内容将通过示例的方式,深入浅出的告诉你,node究竟是用来做什么的!搭建一个简单的web服务器的步骤1.生成如下目录 nodeLearn(文件夹) begining(文件夹) sever.js 2.打开 官网,...原创 2018-04-03 17:09:33 · 5128 阅读 · 0 评论 -
NodeJs入门(一)--Node安装、版本管理
前言概述 Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。 1.可以解析JS代码(没有浏览器安全级别的限制) 2.提供系统级别的API: 文件的读写 进程的管理 网络通信 为什么学nodejs 如...原创 2018-03-23 17:39:52 · 3406 阅读 · 0 评论 -
Eclipse快捷键大全
eclipse 常用快捷键这里是我整理的最常用使用最频繁的的几个快捷键,如果没有你需要的或你想了解更多的Eclipse快捷键,就看下面的快捷键大全吧!Ctrl + 鼠标左键(类、方法、属性的变量名词):定位跟踪某变量声明或定义的位置 Ctrl + S:保存当前文件 Ctrl + X:剪切 Ctrl + C:复制 Ctrl + V:粘贴 Ctrl + D:删除当前行 Ctrl原创 2017-03-13 18:45:52 · 545 阅读 · 0 评论 -
[工具]Eclipse入门教程
很多人都知道要用 eclipse 来做 Java 开发,但很多的新手朋友却不知道eclipse 安装后并不能马上使用,还需要安装 JDK 并搭建环境。下面就来完整的介绍下 eclipse 从安装到使用的整个过程。一、jdk安装与环境搭建 第一步:安装 JDK (Java Development Kit)前往:http://www.oracle.com/technetwork/java/java原创 2017-02-28 12:10:36 · 555 阅读 · 0 评论 -
[工具]markdown编辑器
使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl +原创 2017-02-27 18:16:33 · 438 阅读 · 0 评论 -
[Git]Git教程之SmartGit(图形化界面管理)
Git是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。在Git如日中天的今天,我也不免俗的想用Git将业余时间写的代码管理一下。什么是Git这里不多说,我们这里直接上手。一、下载Git客户端 1、Git官网:http://git-scm.com/,下载客户端。官网的客户端是采用命令行的形式,对新手来说太难了。 想了解命令行的形式的可以看我前面的文章:原创 2017-02-14 16:08:48 · 17330 阅读 · 1 评论 -
[Git]Git教程之msysgit(命令行形式)
步骤一:在GitHub新建托管项目1-1. 要托管到github,那你就应该要有一个属于你自己的github帐号 github官网:https://github.com/ 在地址栏输入地址:github.com 填写用户名、邮箱、密码 点击Sign up即可简单地注册1-2. 完成注册,进入github平台, 点击new repositories 新建一个新项目(你也可原创 2017-02-13 18:54:43 · 2512 阅读 · 0 评论 -
[Bootstrap]从入门到实战_客户案例详情页开发(三)
$客户案例详情页(case.html)新建一个文件case.html,客户案例详情页实际上和平时常见的 “新闻内容页”、“产品介绍页”非常类似,我们这里先做个简化版。最终效果如下: $case.html-1.布局把页面分成左右两栏,左边是正文区域,右边是相关信息,通过栅格系统来布局可以很容易实现。<div class="container"> <div class="row">原创 2017-01-19 17:03:23 · 7296 阅读 · 2 评论 -
[Bootstrap]从入门到实战_首页开发(二)
$首页首先做任何页面之前,我们都要先把结构规划好,这样脑子里有清晰的思路,工作起来才有效率。首页的效果图前面有展示,它包括如下这几个区域: 导航条 轮播图 客户案例列表 产品截图列表 底部网站信息$首页-1. 首页 HTML 骨架与素材准备assets目录里面图片素材(分别是轮播图、客户案例、产品截图,各 3 张) style.css 文件,用于保存自定义样式。然后在 Template原创 2017-01-19 15:59:08 · 12332 阅读 · 2 评论 -
[Bootstrap]从入门到实战_bootstrap网站基本结构简介(一)
手把手教你用Bootstrap开发网站(demo)作为一个web前端攻城狮,如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写,那就太浪费时间了。所以我们需要一个框架,帮我们实现一个页面的基础部分和解决一些繁琐的细节,只要在它的基础上进行个性化定制就可以了。 作为一个后端攻城狮,这个框架也是再适合不过去学习的了。简单上手,也能做出很专业、美观的页面,极大地提高了工作效率。原创 2017-01-18 18:27:48 · 4260 阅读 · 0 评论