前端工程化
文章平均质量分 87
Joern-Lee
嵌入式-物联网-美好的未来~~~
展开
-
记一次包大小优化过程
起源主要来自我们通过微前端加载一个子应用时,结合devTool的network模块发现子应用的包有点太大了,chunk-vendor包有接近700多KB,在网速不好情况下可能需要大几s才能拉下来,所以尝试去优化该子应用的包大小优化之前首先要分析该应用的包构成,关注是哪些模块占据了较大空间,才能有针对性的着手优化。这里无论是react还是vue项目,都可以借助webpack-bundle-analyze工具来进行分析我这里是vue项目,直接基于vue-cli- service配置一下就可使用:接着打包的di原创 2022-06-17 10:53:57 · 778 阅读 · 0 评论 -
模板引擎的整理归纳
文章目录1. 模板引擎是什么2. 不使用模板引擎的示例字符串拼接构造DOM对象3. 使用模板引擎的方式置换型模板引擎JS代码函数型模板语法dom-based模板引擎4. 前端与后端的模板引擎渲染发展变化发展阶段后端模板引擎渲染客户端渲染node中间层服务器端渲染(SSR)使用建议5. 开源的模板引擎6. 参考博客最近项目中涉及到模板引擎,参考了一些博客文章进行了一些学习,并在此进行记录1. 模板引擎是什么首先我们来了解什么是模板,模板就我个人理解而言其产生的目的是为了解决展示与数据的耦合,简单来说模板原创 2020-11-08 12:38:46 · 346 阅读 · 0 评论 -
提高webpack打包速度
文章目录跟上技术的迭代在尽可能少的模块上应用loaderPlugin尽可能精简并可靠resolve参数的合理配置使用DllPlugin提高打包速度去除冗余引用多进程打包合理使用SourceMap结合stats.json文件分析打包结果开发环境无用插件需要剔除主要讲解一些常见的提高webpack打包速度的方法供大家参考探讨~跟上技术的迭代随时升级webpack及其相关管理工具的版本,包括npm,node,yarn等。每个版本都会有优化,同时webpack建立在node环境之上,node的升级也会有一定原创 2020-10-17 11:57:01 · 714 阅读 · 0 评论 -
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 · 415 阅读 · 0 评论 -
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 · 271 阅读 · 0 评论 -
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 · 266 阅读 · 1 评论 -
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 · 469 阅读 · 0 评论 -
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 · 382 阅读 · 0 评论 -
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 · 413 阅读 · 0 评论 -
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 · 298 阅读 · 0 评论 -
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 · 170 阅读 · 0 评论 -
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 · 72 阅读 · 0 评论