2021年2月9日

浅谈Webpack模块打包工具四

摘要:Webpack 生产环境优化 生产环境和开发环境有很大的差异,生产环境只注重运行效率,开发环境主要开发效率,webpack4.0开始提出了(mode)模式的概念 针对不同的环境进行不同的配置,为不同的工作环境创建不同的配置。 Webpack不同环境下的不同配置,主要有两种形式: 1.配置文件根据环境 阅读全文

posted @ 2021-02-09 22:12 メSerendipity 阅读(131) 评论(0) 推荐(0) 编辑

2021年2月8日

浅谈Webpack模块打包工具三

摘要:Source Map 生产代码与开发代码完全不同,如果需要调试应用的话会非常的麻烦,错误信息无法定位,Soutce Map就会逆向得到源代码, 须在打包之后的代码文件的末尾位置例如添加//# sourceMappingURL=jquery-3.4.1.min.map字段即开启sourceMap我们就 阅读全文

posted @ 2021-02-08 21:48 メSerendipity 阅读(143) 评论(0) 推荐(0) 编辑

2021年2月7日

浅谈Webpack模块打包工具二

摘要:Webpack插件机制介绍 Loader专注实现资源模块加载,plugin解决其他自动化工作,比如清除dist目录,拷贝静态文件值输出目录,压缩输出代码等,下面列举几个plugin 的例子。 Webpack自动清除目录插件 Webpack常用插件clean-webpack-plugin 自动清除目录 阅读全文

posted @ 2021-02-07 22:58 メSerendipity 阅读(122) 评论(1) 推荐(0) 编辑

2021年2月6日

浅谈Webpack模块打包工具一

摘要:为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁 开发阶段把散的模块打包成一个模块 解决网络请求频繁问题 3.支持不同类型的资源模块 对于有兼容问题的代码,我们可以通过模块加载器(Loader)编 阅读全文

posted @ 2021-02-06 18:56 メSerendipity 阅读(228) 评论(0) 推荐(0) 编辑

2021年2月4日

浅谈模块化开发

摘要:模块化开发 当下最重要的开发范式,由于需求的日益复杂,把复杂的代码按照功能的不同分为不同的模块单独维护的方式,提高开发效率, 降低维护成本。 一.模块化的演进工程 1.首先我们回顾下前端模块化的演进过程 第一阶段 具体做法就是将每个功能及其相关状态数据各自单独放到不同的文件中,约定每个文件就是一个独 阅读全文

posted @ 2021-02-04 22:13 メSerendipity 阅读(29) 评论(0) 推荐(0) 编辑

2021年2月3日

用gulp搭建并发布自己的cli脚手架

摘要:准备工作 首先按照上节中gulp顺序安装的那个工程(代号A) 删除掉node_modules 然后创建一个luckydog的空文件夹(代号B) 按照脚手架模板安装之后(用脚手架模板安装比较快点),上传到github yarn global add zce-cli(zce-cli是未完成的一个脚手架模 阅读全文

posted @ 2021-02-03 22:59 メSerendipity 阅读(22) 评论(0) 推荐(0) 编辑

2021年1月29日

浅谈自动化构建之gulp

摘要:一.gulp的基本使用 gulp是目前最流行的前端自动化构建系统,核心特点高效易用。(这块不过多的废话了,直接上干货了,有兴趣的话,可以查下gulp简介) 步骤如下: yarn init -y yarn add gulp --dev //安装开发依赖 根目录创建gulofile.js文件(gulp的 阅读全文

posted @ 2021-01-29 20:50 メSerendipity 阅读(99) 评论(0) 推荐(0) 编辑

2021年1月27日

浅谈自动化构建之grunt

摘要:自动化构建 开发行业的自动化构建 一句话把源代码转化为生产代码,作用是脱离运行环境兼容带来的问题开发阶段使用提高效率的语法,规范 和标准,构建转换那些不被支持的特性转化成能够执行的代码。 一.简单的自动化构建案例 简介:通过scss增强css的编程性,以及通过运行一些简单的命令行命令搭建启动服务,热 阅读全文

posted @ 2021-01-27 20:55 メSerendipity 阅读(45) 评论(0) 推荐(0) 编辑

2021年1月26日

浅谈前端常用脚手架cli工具及案例

摘要:前端常用脚手架工具 前端有很多特定的脚手架工具大多都是为了特定的项目类型服务的,比如react项目中的reate-react-app,vue项目中的vue-cli,angular 项目中的angular-cli根据一些信息创建对应的项目基础结构,只适用于对应的项目,还有一些对应的项目脚手架工具比如Y 阅读全文

posted @ 2021-01-26 20:58 メSerendipity 阅读(304) 评论(2) 推荐(1) 编辑

2021年1月23日

浅谈JavaScript代码性能优化2

摘要:一.减少判断层级 从下图代码中可以明显看出,同样的效果判断层级的减少可以优化性能 二.减少作用域链查找层级 简单解释下,下图中第一个运行foo函数,bar函数内打印name,bar作用域内没有name,所以作用域链往上查找,foo内部有name, 但是这种写法实际上是赋值,还要往上查找,全局作用域中 阅读全文

posted @ 2021-01-23 23:12 メSerendipity 阅读(177) 评论(1) 推荐(0) 编辑

导航