前端工程化
文章平均质量分 89
毛小星
这个作者很懒,什么都没留下…
展开
-
Webpack的简单使用
1. Webpack 的简单介绍Webpack 是一个模块化的打包工具,它可以将我们的模块化代码都打包到一个 js 文件中。而对于我们在不同环境中有兼容性问题的代码,我们就可以通过模块加载器(loader)去解决。而且 Webpack 具备代码拆分的能力(Code Splitting),它可以将应用中的代码根据我们的要求去打包,我们可以将应用初次加载的代码打包到一起,其他模块的代码打包到一起,实现渐进式加载。这样我们就可以避免将所有代码都打包到一起,而引起打包文件过大,导致页面加载速度过慢的问题。Web原创 2021-03-28 21:29:47 · 168 阅读 · 0 评论 -
Webpack打包优化
Webpack打包优化Webapck 4 之后默认为我们做了很多配置项,内部开启了很多优化功能。对于开发人员,这种开箱即用的体验显然是很好的,但是同时也会导致我们忽略了很多需要学习的东西,一旦出现什么问题的时候,我们就无从下手了,下面我们就来看一下主要的优化配置项。DefinePluginDefinePlugin 是用来为我们的代码来注入全局成员的,在 production 模式下,这个插件就会默认开启。它会在我们的环境中注入了一个 process.env.NODE_ENV 这样一个环境变量,我们可原创 2021-03-27 23:11:26 · 174 阅读 · 0 评论 -
Webpack 不同环境下的配置
Webpack 不同环境下的配置我们在使用 Webpack 去构建我们的项目的时候,我们肯定要区分本地开发环境和线上环境的一些配置,因为它们两者有很多不同的地方,例如线上环境我们就不需要开启 source map 这样的选项来防止别人暴露我们的源代码。所以我们可以通过使用不同配置文件去在不同环境下打包我们的代码。我们至少需要三个文件去配置我们的项目webpack.common.js 公共配置webpack.dev.js 开发环境配置webpack.prod.js 生产环境配置这样我们就能使原创 2021-03-27 23:08:13 · 330 阅读 · 0 评论 -
Rollup的简单使用
1. Rollup 概述Rollup 是一款优秀的模块化打包器,它的作用与 Webpack 类似,但是相对于 Webpack,Rollup 更加小巧,它仅仅是一款模块化打包器,它并没有其他功能。例如 Webpack 有模块热替换功能, 而 Rollup 对这样的功能就没有很好的支持。Rollup 的诞生并不是为了和 Webpack 去竞争,而只是为了提供一个充分利用 ESM 各项特性的高效打包器。如果你同时看过 Rollup 和 Webpack 打包后的文件后,你就会发现 Rollup 的打包文件简洁的原创 2021-03-21 23:42:50 · 1514 阅读 · 0 评论 -
Gulp的简单使用
1. Gulp 的简单介绍Gulp 是一款比较主流的前端构建工具,它相比于 Grunt 的构建速度会更快一些,因为 Gulp 是基于内存去实现的,相对于磁盘读写,它的速度肯定会更快。而且它默认支持同时执行多个任务,所以效率会大大提高,而且它的使用方式相对于 Grunt 会更加简单一些,配置文件的结构也比较简单易懂,所以现在也是比较受欢迎的前端构建工具,很多大型项目会将 Gulp 和 Webpack 混合使用,去处理一些比较复杂的情况。2. Gulp 的基本使用我们创建一个文件,然后初始化 packa原创 2021-03-21 23:37:36 · 91 阅读 · 0 评论 -
Grunt 的简单使用
1. Grunt 的简单介绍grunt 可以说是前端构建工具的鼻祖了,它的插件生态非常完善,用官方的话来说:grunt 的插件几乎可以自动化帮助你做任何你想做的事情。虽然 grunt 虽然强大,但是现在 grunt 基本已经退出历史舞台了。因为 grunt 的工作过程是基于临时文件实现的,所以它的构建速度相对较慢,例如你去使用 grunt 对 sass 文件的构建,我们一般先会对 sass 文件进行编译操作,再去添加一些私有属性的前缀,最后再去压缩代码。在这样的过程当中,grunt 的每一步都会有磁盘读原创 2021-03-14 23:01:06 · 478 阅读 · 0 评论 -
Eslint 简单使用
Eslint 简单使用前端规范化随着前端开发需求的日益膨胀,前端的规范化在一个开发团队中扮演着越来越重要的角色。那么我们为什么要有前端规范化呢?在我们日常实际的开发过程中,很多中型或者大型的软件开发都需要多人去协同开发,即使是在一个前端团队中,不同的开发人员也有不同的编码习惯和喜好。而这些不同的开发习惯必然会对项目进度造成一定的阻碍,会提高我们的项目维护成本,甚至在开发过程中就会对项目进度造成阻塞性的障碍,所以每个项目或者团队都需要有统一的标准。那么我们在开发的过程中,哪些内容需要进行规范化呢?个人原创 2021-03-14 22:51:58 · 352 阅读 · 0 评论 -
前端模块化开发
模块化开发1. 模块化开发概述模块化开发目前是当下最重要的前端开发范式之一,模块化并不是一种技术,而是一种开发思想。模块化将我们的复杂的代码根据功能划分为不同的模块单独去维护,通过这种方式提升开发效率和降低维护成本。2. 模块化的演变过程早期的前端技术标准根本没有意识到前端应用能有今天这样的规模,所以很多设计上的遗留问题就导致今天去实现前端模块化会遇到很多问题。当然了,如今都被一些标准或者工具帮助我们解决了这些问题,但是它的演进过程是值得我们去思考的。stage1-文件划分最早期的前端模原创 2021-03-07 18:13:27 · 722 阅读 · 2 评论