6 Joern-Lee

尚未进行身份认证

我要认证

嵌入式-物联网-美好的未来~~~

等级
TA的排名 7w+

提高webpack打包速度

文章目录跟上技术的迭代在尽可能少的模块上应用loaderPlugin尽可能精简并可靠resolve参数的合理配置使用DllPlugin提高打包速度去除冗余引用多进程打包合理使用SourceMap结合stats.json文件分析打包结果开发环境无用插件需要剔除主要讲解一些常见的提高webpack打包速度的方法供大家参考探讨~跟上技术的迭代随时升级webpack及其相关管理工具的版本,包括npm,node,yarn等。每个版本都会有优化,同时webpack建立在node环境之上,node的升级也会有一定

2020-10-17 11:57:01

Webpack的配置案例-devServer、EsLint与多页面

文章目录1. devServer实现请求转发问题发现devServer的proxy更多配置注意事项解决单页面应用路由问题问题引入使用devServer解决2. EsLint的配置简单介绍webpack中使用最佳实践3. 多页面打包配置案例实验环境搭建生成多个HTML文件自动化生成多HTMLPlugin1. devServer这里讲解两个devServer相关的配置案例实现请求转发问题发现这里我们基于React尝试发送一个Ajax请求,这里先借助axios库来实现:axios.get('http:

2020-10-17 11:56:29

Webpack的配置案例-库、PWA、TS打包配置

文章目录1. library的打包编写基础代码webpack的安装和配置别人如何引入你的库文件externals参数库文件上传2. PWA打包模拟服务器引入PWAPWA插件应用service-worker实现PWA3. Typescript(TS)打包编写demo工程webpack配置tsconfig.json配置文件ts中引入库文件时注意事项1. library的打包前面讲解的都是对自己的业务代码来打包,这里阐述一下如何利用webpack来打包自己的库代码,这里我们以一个简单的函数库为例编写基础代码

2020-10-17 11:56:01

Webpack的进阶概念-CSS分割、Shimming与其他

文章目录1. CSS的分割1.1 MinicssExtractPlugin介绍和使用1.2 filename和chunkFilename1.3 生产环境优化压缩(production) - 合并压缩2. Shimming2.1 ProvidePlugin插件2.2 imports-loader3. content-hash4. 环境变量1. CSS的分割之前的文章中讨论主要围绕JS的代码分割和应用,这里我们来看一下针对CSS的分割1.1 MinicssExtractPlugin介绍和使用这个插件帮助

2020-10-06 17:47:38

Webpack的进阶概念-CodeSplitting、懒加载与预加载

文章目录1. CodeSplitting1.1 问题引入1.2 引入codeSplitting解决1.3 webpack中的CodeSplitting1.4 异步模块引入和拆分1.5 SplitChunksPlugin配置参数详解重命名针对异步/同步代码分割代码分割的阈值二次分割打包数量要求命名连接符cacheGroups1.6 Chunk是什么2. 懒加载LazyLoading3. 打包分析工具4. 预加载4.1 问题引入4.2 Preloading与Prefetching解决问题1. CodeSpli

2020-10-06 17:47:06

Webpack的进阶概念-TreeShaking与buildMode

文章目录1. TreeShaking1.1 问题引入1.2 配置使用2. buildMode2.1 为不同模式分别编写配置文件2.2 配置封装2.3 小提示1. TreeShakingtree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和export1.1 问题引入我们新增一个工具文件math.js,里面编写一个add和minus方法://math.jse

2020-10-06 17:46:34

Webpack的核心概念-devServer、HMR与Babel

文章目录1. devServer1.1 使用--watch参数1.2 webpackDevServer基础使用其他配置1.3 自己实现一个类似的服务搭建环境编写server.js2. Hot Module Replacement - 热模块更新2.1 HMR使用CSSJS2.2 注意事项3. Babel3.1 问题引入3.2 Babel的介绍和使用3.3 babel/polyfill使用3.4 babel/plugin-transform-runtime3.5 解决options配置项过多问题3.6 配置R

2020-10-03 21:34:41

Webpack的核心概念-entry、output与sourceMap

文章目录1.entry与ouput的基本配置1.1 打包多个文件并输出1.2 为HTML的JS引用添加公共域名2. sourceMap的配置2.1 什么是sourceMap2.2 sourceMap的使用2.3 其他类型SourceMap配置介绍inline-source-mapcheap-inline-source-mapcheap-module-source-mapeval前缀2.4 最佳实践2.5 映射原理1.entry与ouput的基本配置这里我们继续讲解一下这两个配置项:...entry:

2020-10-03 21:34:09

Webpack的核心概念-loader与plugin

文章目录1. Webpack的loader1.1 问题引入1.2 loader是什么1.3 配置文件修改以引入loader1.4 loader打包静态资源-图片保持图片原名打包其他类型图片希望图片资源打包后存放在一个单独目录url-loader与file-loader区别最佳实践1.5 loader打包静态资源-样式使用style-loader与css-loader样式中前缀的补足scss的处理less的处理1.6 css-loader的进阶配置importLoadersCSS模块化1.7 loader打包

2020-10-03 21:33:16

Webpack的入门介绍

文章目录1.问题引入2.安装Webpack2.1 安装node2.2 初始化环境3. Webpack的使用4. Webpack是什么?5. Webpack的配置文件5.1 新增一个配置文件5.2 npm scripts配置6. 打包时的log说明1.问题引入原始的时候我们编写网页程序,主要是编写HTML文件,接着通过scrpit标签引入一个index.js文件辅助编写一些业务逻辑和DOM操作。若JS处理逻辑过多,index.js文件就会膨胀,而且编写逻辑主要以面向过程为主,不好维护和扩展。接着可以考虑

2020-10-03 14:39:05

CSS Flexbox弹性盒子模型总结

1. 背景弹性盒子布局指在提供一个为容器内的items进行更有效率的排列,分配空间以及布局的方式,弹性的意思是即便items的尺寸是未知或者动态的也可以使用!这种布局的理念主要是给容器一种能力可以调节修改items的宽度高度和顺序来充分利用容器内可用的空间—甚至可以适应几乎所有的设备和屏幕尺寸。更重要的是,弹性盒子布局的方向是不可知的,这个与常规的布局相反(块布局是垂直方向的而行内则是水平基...

2020-03-05 14:53:12

React项目部署在阿里云服务器ECS

本来计划是将一个React工程部署在自己的Centos虚拟机中,但是因为一些网络和安全问题暂时停止了这个计划,于是就把该项目转移到阿里云服务器中,这篇笔记记载了如何从第一步开始直到浏览器通过IP可以访问你的React项目为止。1.编译你的React项目我的项目是通过create-react-app脚手架创建的,当项目编写完成之后可以执行package.json下面的build脚本就可以了:n...

2020-02-16 20:02:46

React入门(一):认识React

1.前言最近因为业务需要开始学习Web前端-React框架的知识,之前一直做的是Android的研发,对于Web前端来说基本就是一个小白,所以借助互联网和资源对业务具体需要的React框架进行了学习,并在自己的项目中进行的实践,最后准备将自己的学习过程总结成一系列文章同大家分享,供同样刚入门的小伙伴一起学习交流~(虽然经过了整理,但不乏有错误与缺漏之处,可以在评论区留言指出或一起讨论)另外此系...

2020-01-03 21:21:49

React+Typescript+Redux的使用步骤

目录1. 安装Redux基本环境2. 为项目引入Redux2.1 rootReducer的创建2.2 生成store2.3 包裹根组件3. 子模块中使用Redux3.1 创建types文件3.2 回顾一下Redux的工作流3.3 分别创建子模块的reducer和actionsreduceractions3.4 子模块主文件的编写react-red...

2019-12-18 09:47:08

执行create-react-app报错A template was not provided

最近初始化一个React项目的时候使用了全局脚手架工具进行初始化,但是却报错了,错误如下图所示:然后我就跑去官网看了一下教程,结果发现脚手架初始化的方式改变了:所以先执行npm rm -g create-react-app去删除全局脚手架,再利用上面的npx命令就可以了!!!...

2019-12-16 21:59:01

ADB调试环境配置

接着配置一下adb调试工具每做完一步,都可以试试adb命令能不能用。三步都做完应该就能解决adb不能用的问题。1、保证SDK路径下的platform-tools和tools文件夹中包含adb.exe ,AdbWinApi.dll,AdbWinUsbApi.dll三个文件。2、在系统环境变量path中添加adb路径,对应platform-tools 和 tools ...

2019-09-01 22:03:32

Android报错:Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW

今天调试程序的报了一个错误:android.util.AndroidRuntimeException: Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK flag. Is this really what you want?通过分析Log和网上查...

2019-07-25 21:01:25

Java12的新特性

目录1. JEP 189: Shenandoah: A Low-Pause-Time Garbage Collector (Experimental)---Shenandoah:低暂停时间的 GC(实验性功能)2. JEP 230: Microbenchmark Suite---微基准测试套件3. JEP 325: Switch Expressions (Preview)---Sw...

2019-03-21 08:44:31

云服务器与相关存储服务公网流量过高的问题

最近作百度的一个智能音箱语音技能,发现CFC函数调用功能自从开始收费之后我的扣费一直居高不下,看了一下日志和监控发现公网流量这一项每一天都接近2GB,自己本身是Android开发出身的,数据库和后台接触不多,所以这个问题一直困扰着我,但是在朋友和同百度云服务器的工程师的交流中最终解决了该问题,不知道这个问题的解决方案是否具有泛用性又是否有很多人遇到跟我一样的问题,这里我还是贴出来一方面给自己做个笔...

2019-02-17 11:07:26

2018年Android面经-BAT、头条、网易、爱奇艺、华为等等(下)

目录1.华为Android岗位面经1.1 一面---30Min1.2 二面---30Min2. VIVOAndroid岗位面经2.1 一面---50Min3.跨专业求职体会本篇分为上中下三篇文章:上篇:阿里巴巴与今日头条中篇:网易与爱奇艺下篇:华为与VIVO以及自己的转行心得本篇接着上一篇,继续分享华为与VIVO的Android岗位面试经验。1.华为...

2018-11-06 09:23:17

查看更多

勋章 我的勋章
  • GitHub
    GitHub
    绑定GitHub第三方账户获取
  • 勤写标兵Lv2
    勤写标兵Lv2
    授予每个自然周发布4篇到6篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。