- 博客(61)
- 资源 (17)
- 收藏
- 关注
原创 webpack性能优化(四)
webpack性能优化(一).webpack性能优化(二).webpack性能优化(三).性能优化一、懒加载二、ESLint1.使用2.配置1.env2.parserOptions3.parser4.globals5.extends6.ignoreFiles7.rules三、BundleAnalyzer四、gzip1.B/S结构中的压缩传输2.使用webpack进行预压缩一、懒加载在一些页面中某些js只是需要事件或者某些条件才会触发,这种情况下可以使用懒加载,减少页面加载渲染的时间。//inde
2020-08-31 21:32:11 258
原创 webpack性能优化(三)
webpack性能优化(一).webpack性能优化一、代码压缩1.前言2.Terser3.webpack+Terser二、tree shaking一、代码压缩1.前言为什么要进行代码压缩减少代码体积;破坏代码的可读性,提升破解成本;什么时候要进行代码压缩生产环境使用什么压缩工具目前最流行的代码压缩工具主要有两个:UglifyJs和TerserUglifyJs是一个传统的代码压缩工具,已存在多年,曾经是前端应用的必备工具,但由于它不支持ES6语法,所以目前的流行度已有所下降。
2020-08-31 19:57:42 426
原创 webpack性能优化(二)
性能优化一、手动分包1.基本原理2.打包公共模块3.使用公共模块4.总结二、自动分包一、手动分包1.基本原理手动分包的总体思路是:先单独的打包公共模块公共模块会被打包成为动态链接库(dll Dynamic Link Library),并生成资源清单根据入口模块进行正常打包打包时,如果发现模块中使用了资源清单中描述的模块,则不会形成下面的代码结构//源码,入口文件index.jsimport $ from "jquery"import _ from "lodash"_.isAr
2020-08-31 16:39:30 478 1
原创 webpack性能优化(一)
性能优化一、减少模块解析1.什么叫做模块解析2.不做模块解析会怎样3.哪些模块不需要解析4.如何让某个模块不要解析二、优化loader性能1.进一步限制loader的应用范围2.缓存loader的结果3.为loader的运行开启多线程三、热替换 HMR1.流程2.使用和原理3.样式热替换一、减少模块解析1.什么叫做模块解析模块解析包括:抽象语法树分析、依赖分析、模块语法替换2.不做模块解析会怎样如果某个模块不做解析,该模块经过loader处理后的代码就是最终代码。如果没有loader对该模块
2020-08-30 20:12:13 735 1
原创 webpack性能优化概述
性能优化概述一、性能优化概述一、性能优化概述本章所讲的性能优化主要体现在三个方面:构建性能这里所说的构建性能,是指在开发阶段的构建性能,而不是生产环境的构建性能优化的目标,是降低从打包开始,到代码效果呈现所经过的时间构建性能会影响开发效率。构建性能越高,开发过程中时间的浪费越少传输性能传输性能是指,打包后的JS代码传输到浏览器经过的时间在优化传输性能时要考虑到:总传输量:所有需要传输的JS文件的内容加起来,就是总传输量,重复代码越少,总传输量越少文件数量:当访问页面时,需要传输的J
2020-08-30 08:55:55 202
原创 babel预设、插件和webpack中运行
babel预设一、babel预设1.babel预设二、babel插件1.`@babel/plugin-proposal-class-properties`2.`@babel/plugin-proposal-function-bind`3.`@babel/plugin-proposal-optional-chaining`4.`babel-plugin-transform-remove-console`5.`@babel/plugin-transform-runtime`三、webpack中运行一、babe
2020-08-29 21:44:28 818 1
原创 babel的安装和使用
babel的安装和使用一、babel的安装1.babel简介2.babel的安装二、babel的使用1.babel的使用2.babel的配置一、babel的安装官网:https://babeljs.io/民间中文网:https://www.babeljs.cn/1.babel简介babel一词来自于希伯来语,直译为巴别塔巴别塔象征的统一的国度、统一的语言而今天的JS世界缺少一座巴别塔,不同版本的浏览器能识别的ES标准并不相同,就导致了开发者面对不同版本的浏览器要使用不同的语言,和古巴比伦
2020-08-29 16:57:50 1130
原创 抽离css文件
抽离css文件一、抽离css文件一、抽离css文件目前,css代码被css-loader转换后,交给的是style-loader进行处理。style-loader使用的方式是用一段js代码,将样式加入到style元素中。而实际的开发中,我们往往希望依赖的样式最终形成一个css文件此时,就需要用到一个库:mini-css-extract-plugin该库提供了1个plugin和1个loaderplugin:负责生成css文件loader:负责记录要生成的css文件的内容,同时导出开启css-
2020-08-29 11:05:01 452
原创 PostCss
PostCss一、PostCss1.什么是PostCss2.安装3.配置文件4.插件5.postcss-preset-env1.自动的厂商前缀2.未来的CSS语法3.变量4.自定义选择器5.嵌套6.postcss-apply7.postcss-color-function8.[扩展]postcss-import9.stylelint一、PostCss本节课的内容和webpack无关!!!1.什么是PostCss学习到现在,可以看出,CSS工程化面临着诸多问题,而解决这些问题的方案多种多样。如果
2020-08-29 08:23:09 2331 1
原创 预编译器less
预编译器less一、预编译器less1.基本原理2.LESS的安装和使用3.LESS的基本使用4.webpack中使用一、预编译器less1.基本原理编写css时,受限于css语言本身,常常难以处理一些问题:重复的样式值:例如常用颜色、常用尺寸重复的代码段:例如绝对定位居中、清除浮动重复的嵌套书写由于官方迟迟不对css语言本身做出改进,一些第三方机构开始想办法来解决这些问题其中一种方案,便是预编译器预编译器的原理很简单,即使用一种更加优雅的方式来书写样式代码,通过一个编译器,将其转换为
2020-08-27 23:59:48 891
原创 css module
css module一、css module1.思路2.实现原理3.如何应用样式一、css module1.思路通过命名规范来限制类名太过死板,而css in js虽然足够灵活,但是书写不便。css module 开辟一种全新的思路来解决类名冲突的问题css module 遵循以下思路解决类名冲突问题:css的类名冲突往往发生在大型项目中大型项目往往会使用构建工具(webpack等)搭建工程构建工具允许将css样式切分为更加精细的模块同JS的变量一样,每个css模块文件中难以出现冲突
2020-08-27 13:30:57 5617
原创 css in js
css in js一、css in js一、css in jscss in js 的核心思想是:用一个JS对象来描述样式,而不是css样式表例如下面的对象就是一个用于描述样式的对象:const styles = { backgroundColor: "#f40", color: "#fff", width: "400px", height: "500px", margin: "0 auto"}由于这种描述样式的方式根本就不存在类名,自然不会有类名冲突至
2020-08-26 23:03:34 1009
原创 css命名方法-BEM
这里写目录标题一、BEM一、BEMBEM是一套针对css类样式的命名方法。其他命名方法还有:OOCSS、AMCSS、SMACSS等等BEM全称是:Block Element Modifier一个完整的BEM类名:block__element_modifier,例如:banner__dot_selected,可以表示:轮播图中,处于选中状态的小圆点三个部分的具体含义为:Block:页面中的大区域,表示最顶级的划分,例如:轮播图(banner)、布局(layout)、文章(article)
2020-08-26 21:51:35 332
原创 webpack拆分css
这里写目录标题1.利用webpack拆分css {ignore}1.css-loader2.style-loader1.利用webpack拆分css {ignore}要拆分css,就必须把css当成像js那样的模块;要把css当成模块,就必须有一个构建工具(webpack),它具备合并代码的能力而webpack本身只能读取css文件的内容、将其当作JS代码进行分析,因此,会导致错误于是,就必须有一个loader,能够将css代码转换为js代码1.css-loadercss-loader的作用,就
2020-08-26 20:06:53 715
原创 webpack-css工程化
css工程化一、css工程化1.类名冲突的问题2.重复样式3.css文件细分问题4.如何解决1.解决类名冲突2.解决重复样式的问题3.解决css文件细分问题一、css工程化1.类名冲突的问题当你写一个css类的时候,你是写全局的类呢,还是写多个层级选择后的类呢?你会发现,怎么都不好过深的层级不利于编写、阅读、压缩、复用过浅的层级容易导致类名冲突一旦样式多起来,这个问题就会变得越发严重,其实归根结底,就是类名冲突不好解决的问题2.重复样式这种问题就更普遍了,一些重复的样式值总是不断的出现
2020-08-26 17:17:40 237
原创 webpack内置插件
内置插件一、内置插件DefinePluginBannerPluginProvidePlugin一、内置插件所有的webpack内置插件都作为webpack的静态属性存在的,使用下面的方式即可创建一个插件对象const webpack = require("webpack")new webpack.插件名(options)DefinePlugin全局常量定义插件,使用该插件通常定义一些常量值,例如:new webpack.DefinePlugin({ PI: `Math.PI`, /
2020-08-26 09:57:54 511
原创 webpack常用拓展
常用拓展一、CleanWebpackPlugin二、HtmlWebpackPlugin三、CopyPlugin四、file-loader五、url-loader六、路径问题一、CleanWebpackPlugin每次打包后不会再次生成新的文件,而是对原来打包的文件进行更新// webpack.config.jsvar { CleanWebpackPlugin } = require("clean-webpack-plugin")module.exports = { mode: "devel
2020-08-25 22:37:17 295
原创 webpack区分环境和其它配置
区分环境一、区分环境二、其他配置1.context2.output1.library2.libraryTarget3.target4.module.noParse5.resolve1.modules2.extensions3.alias6.externals7.stats一、区分环境有些时候,我们需要针对生产环境和开发环境分别书写webpack配置为了更好的适应这种要求,webpack允许配置不仅可以是一个对象,还可以是一个函数module.exports = env => { ret
2020-08-25 10:23:13 788
原创 webpack-loader和plugins
loader一、loader1.处理loaders流程2.loader配置3.loader匹配规则二、plugin1.事件名称2.事件类型3.处理函数一、loaderwebpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。更多的功能需要借助webpack loaders和webpack plugins完成。webpack loader: loader本质上是一个函数,它的作用是将某个源码字符串转换成另一个源码字符串返回。loader函数的将在模块
2020-08-23 16:03:36 479
原创 webpack入口与出口
入口与出口一、入口与出口1.出口2.入口二、实践1.一个页面一个整合js2.一个页面多个整合js3.单页应用一、入口与出口模块化代码中,比如require("./"),表示当前js文件所在的目录在路径处理中,"./"表示node运行目录__dirname: 所有情况下,都表示当前运行的js文件所在的目录,它是一个绝对路径//dirname.jsconsole.log(__dirname);node内置模块 - path: https://nodejs.org/dist/late
2020-08-23 09:09:22 951
原创 webpack编译过程
编译过程一、编译过程1.初始化2.编译3.输出4.总过程一、编译过程webpack 的作用是将源代码编译(构建、打包)成最终代码整个过程大致分为三个步骤初始化编译输出1.初始化此阶段,webpack会将CLI参数、配置文件、默认配置进行融合,形成一个最终的配置对象。例:以及终端命令,整理成最终配置对象对配置的处理过程是依托一个第三方库yargs完成的此阶段相对比较简单,主要是为接下来的编译阶段做必要的准备目前,可以简单的理解为,初始化阶段主要用于产生一个最终的配置2.
2020-08-22 20:27:40 884
原创 devtool配置
devtool配置一、devtool配置1.source map 源码地图2.webpack中的source map3.对于开发环境一、devtool配置1.source map 源码地图本小节的知识与 webpack 无关前端发展到现阶段,很多时候都不会直接运行源代码,可能需要对源代码进行合并、压缩、转换等操作,真正运行的是转换后的代码与此同时就给调试带来了困难,因为当运行发生错误的时候,我们更加希望能看到源代码中的错误,而不是转换后代码的错误为了解决这一问题,chrome浏览器率先支持
2020-08-22 13:11:46 751
原创 webpack编译分析和配置文件
编译分析和配置文件一、编译分析二、配置文件一、编译分析//a.jsconsole.log('module a');module.exports = 'a';//index.jsconsole.log('module index');var a = require('./a');console.log(a);我们这里思考打包过程,如果整理模块,且不互相污染变量var modules = {//通过一个变量,将模块保存为对象形式 './src/a.js': function(mo
2020-08-22 10:37:03 317
原创 webpack-模块化兼容性
模块化兼容性一、模块化兼容性1.同模块化标准2.不同模块化标准3.最佳实践一、模块化兼容性由于webpack同时支持CommonJS和ES6 module,因此需要理解它们互操作时webpack是如何处理的1.同模块化标准如果导出和导入使用的是同一种模块化标准,打包后的效果和之前学习的模块化没有任何差异2.不同模块化标准不同的模块化标准,webpack按照如下的方式处理// ./src/a.jsexport default {//es6导出 a: 1, b: 2,
2020-08-21 21:11:09 286
原创 webpack安装使用
webpack安装使用一、安装1.webpack简介2.webpack的安装二、使用一、安装webpack官网:https://www.webpackjs.com/目前的最新版本:webpack41.webpack简介webpack是基于模块化的打包(构建)工具,它把一切视为模块它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。webpack的特点:为前端工程化而生:webpack致力于解决前端工程化,特别是浏览器端工
2020-08-21 16:22:26 313
原创 webpack-浏览器端实现模块化
浏览器端实现模块化一、浏览器端的模块化2.根本原因3.解决办法4.常见的构建工具一、浏览器端的模块化问题:效率问题:精细的模块划分带来了更多的JS文件,更多的JS文件带来了更多的请求,降低了页面访问效率兼容性问题:浏览器目前仅支持ES6的模块化标准,并且还存在兼容性问题工具问题:浏览器不支持npm下载的第三方包这些仅仅是前端工程化的一个缩影当开发一个具有规模的程序,你将遇到非常多的非业务问题,这些问题包括:执行效率、兼容性、代码的可维护性可扩展性、团队协作、测试等等等等,我们将这些问题称之
2020-08-21 11:41:58 389
原创 其它包管理器
其它包管理器一、cnpm二、nvm1.下载和安装2.使用nvm三、pnpm1.全局安装pnpm2.pnpm原理3.注意事项四、bower一、cnpm官网地址:https://npm.taobao.org/为解决国内用户连接npm registry缓慢的问题,淘宝搭建了自己的registry,即淘宝npm镜像源过去,npm没有提供修改registry的功能,因此,淘宝提供了一个CLI工具即cnpm,它支持除了npm publish以外的所有命令,只不过连接的是淘宝镜像源如今,npm已经支持修改r
2020-08-20 16:38:08 708
原创 yarn学习
yarn学习一、yarn命令二、yarn 的特别礼物一、yarn命令初始化初始化:yarn init [--yes/-y]与npm init同理安装添加指定包:yarn [global] add package-name [--dev/-D] [--exact/-E]安装package.json中的所有依赖:yarn install [--production/--prod]脚本和本地CLI运行脚本:yarn run 脚本名与npm run同理start、stop、tes
2020-08-20 11:15:47 3722
原创 yarn简介
yarn简介一、yarn简介一、yarn简介yarn 官网:https://www.yarnpkg.com/zh-Hans/yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具,它仍然使用 npm 的registry,不过提供了全新 CLI 来对包进行管理过去,yarn 的出现极大的抢夺了 npm 的市场,甚至有人戏言,npm 只剩下一个 registry 了。之所以会出现这种情况,是因为在过去,npm 存在下面的问题:依赖目
2020-08-20 09:29:15 2266
原创 发布包
发布包一、发布包1.准备工作2.发布一、发布包1.准备工作移除淘宝镜像源npm config delete registry到npm官网注册一个账号,并完成邮箱认证本地使用 npm cli 进行登录使用命令npm login登录使用命令npm whoami查看当前登录的账号使用命令npm logout注销创建工程根目录使用npm init进行初始化(package.json)2.发布开发确定版本(package.json的version)使用命令npm publish
2020-08-19 22:22:20 285
原创 npm命令
npm命令一、npm命令二、环境配置1.在node中读取package.json三、其它npm命令1.安装2.查询3.更新4.卸载包5.npm 配置一、npm命令在开发的过程中,我们可能会反复使用很多的 CLI 命令,例如:启动工程命令(node 或 一些第三方包提供的CLI命令)部署工程命令(一些第三方包提供的CLI命令)测试工程命令(一些第三方包提供的CLI命令)于是,npm 非常贴心的支持了脚本,只需要在 package.json 中配置 scripts 字段,即可配置各种脚本名称之后
2020-08-19 21:55:03 4202
原创 包语义版本
语义版本一、语义版本1.回顾:版本号规则2.语义版本3.避免还原的差异4.npm的差异版本处理一、语义版本思考:如果你编写了一个包A,依赖另外一个包B,你在编写代码时,包B的版本是2.4.1,你是希望使用你包的人一定要安装包B,并且是2.4.1版本,还是希望他可以安装更高的版本,如果你希望它安装更高的版本,高的什么程度呢?1.回顾:版本号规则版本规范:主版本号.次版本号.补丁版本号主版本号:仅当程序发生了重大变化时才会增长,如新增了重要功能、新增了大量的API、技术架构发生了重大变化次版本号:
2020-08-19 16:31:15 214
原创 使用包实现简易数据爬虫
简易数据爬虫一、实现一、实现需要用到的包:axios:专门用于在各种环境中发送网络请求,并获取到服务器响应结果cheerio:jquery的核心逻辑包,支持所有环境,可用于讲一个html字符串转换成为jquery对象,并通过jquery对象完成后续操作fs:node核心模块,专门用于文件处理 。- fs.writeFile(文件名, 数据)//getMoviesjsconst axios = require('axios');const cheerio = require("cheeri
2020-08-19 11:36:15 222
原创 包的安装、配置、使用
安装、配置、使用一、包的安装1.本地安装2.全局安装二、包的配置1.配置文件2.保存依赖关系三、包的使用一、包的安装安装(install)即下载包由于 npm 的官方 registry 服务器位于国外,可能受网速影响导致下载缓慢或失败。因此,安装好 npm 之后,需要重新设置 registry 的地址为国内地址。目前,淘宝 https://registry.npm.taobao.org 提供了国内的 registry 地址,先设置到该地址。设置方式为npm config set registry h
2020-08-19 00:17:04 684
原创 包管理器概述
包管理器概述一、包管理器概述1.概念2.背景3.前端包管理器一、包管理器概述1.概念模块(module)通常以单个文件形式存在的功能片段,入口文件通常称之为入口模块或主模块库(library,简称lib)以一个或多个模块组成的完整功能块,为开发中某一方面的问题提供完整的解决方案包(package)包含元数据的库,这些元数据包括:名称、描述、git主页、许可证协议、作者、依赖等等2.背景CommonJS 的出现,使 node 环境下的 JS 代码可以用模块更加细粒度的划分。一个类、一个函
2020-08-18 16:25:44 881
原创 ES6模块化
ES6模块化一、ES6模块化简介二、基本导入导出1.基本导出2.基本导入三、默认导入导出1.默认导出2.默认导入3.注意一、ES6模块化简介ECMA组织参考了众多社区模块化标准,终于在2015年,随着ES6发布了官方的模块化标准,后成为ES6模块化ES6模块化具有以下的特点使用依赖预声明的方式导入模块依赖延迟声明优点:某些时候可以提高效率2. 缺点:无法在一开始确定模块依赖关系(比较模糊)依赖预声明优点:在一开始可以确定模块依赖关系2. 缺点:某些时候效率较低灵活
2020-08-18 10:02:56 269
原创 浏览器模块化
浏览器模块化一、浏览器端模块化的难题1.CommonJS的工作原理2.当浏览器遇到CommonJS3.新的规范4.AMD5.CMD一、浏览器端模块化的难题1.CommonJS的工作原理当使用require(模块路径)导入一个模块时,node会做以下两件事情(不考虑模块缓存):通过模块路径找到本机文件,并读取文件内容将文件中的代码放入到一个函数环境中执行,并将执行后module.exports的值作为require函数的返回结果正是这两个步骤,使得CommonJS在node端可以良好的被支持
2020-08-17 16:04:06 877
原创 CommonJS
CommonJS一、CommonJS1.模块的导出2.模块的导入3.CommonJS规范4.nodejs对CommonJS的实现5.实例6.练习一、CommonJS在nodejs中,由于有且仅有一个入口文件(启动文件),而开发一个应用肯定会涉及到多个文件配合,因此,nodejs对模块化的需求比浏览器端要大的多由于nodejs刚刚发布的时候,前端没有统一的、官方的模块化规范,因此,它选择使用社区提供的CommonJS作为模块化规范在学习CommonJS之前,首先认识两个重要的概念:模块的导出和模块的
2020-08-17 09:38:05 1207
原创 模块化概述
模块化一、JavaScript 模块化发展史1.第一阶段2.第二阶段3.第三阶段4.第四阶段一、JavaScript 模块化发展史1.第一阶段在 JavaScript 语言刚刚诞生的时候,它仅仅用于实现页面中的一些小效果那个时候,一个页面所用到的 JS 可能只有区区几百行的代码在这种情况下,语言本身所存在的一些缺陷往往被大家有意的忽略,因为程序的规模实在太小,只要开发人员小心谨慎,往往不会造成什么问题在这个阶段,也不存在专业的前端工程师,由于前端要做的事情实在太少,因此这一部分工作往往由后端工程
2020-08-16 10:53:28 461
js+jq、1000+案例.zip
2020-05-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人