最近有在使用 highlight.js 做代码的高亮展示，主要是展示对 SQL 语言的处理。看了看 highlight.js 的提供的相关代码
前沿：按需加载是性能优化其中的一个环节，可以是图片的按需加载，也就是lazyload来实现按需加载的场景,也可以是组件库的引入，只需部分组件的使用而无需全局引入整个组件库的场景，又可以是路由的按需加载，当路由被访问的时候才加载对应组件的场景，以此来实现更高效率的使用等等，本文把“懒加载”也划分为按需加载
学习Vue的时候，各类教程都会告诉我们：Vue 的特点是SPA——Single Page Application（单页应用程序）。它有着诸如：“只有第一次会加载页面, 以后的每次页面切换，只需要进行组件替换；减少了请求体积，加快页面响应速度，降低了对服务器的压力” 等等优点。
经过测试，发现两种方式打包后的体积都为 21 k，第二种方式仍然将整个包引入项目中了。可是 lodash 就是这么玩的呀，这和说好的不一样呀，难道是忽视了什么细节么。
树酱希望将前端的乐趣带给大家 本文已收录 github.com/littleTreem… 喜欢就star✨ 前沿：按需加载是性能优化其中的一个环节，可以是图片的按需加载，也就是lazyload来实现按需加载的场景,也可以是组件库的引入，只需部分组件的使用而无需全局引入整个组件库的场景，又可以是路由的按需加载，当路由被访问的时候才加载对应组件的场景，以此来实现更高效率的使用等等，本文把“懒加载”也划分为按需加载 1.图片按需加载 场景：当一个页面存在需要多个图片加载的场景时，可以通过我们经常看到
前段时间做了一个项目，是使用 Create-React-App 脚手架 + TypeScript + Ant Design 组件库搭建的，在减少包体积上有一些方法和大家分享一下。我们目标是将包体积降到几十 k 这样一个级别上，不受限于包体积，坦然使用框架。
webpack ensure相信大家都听过。有人称它为异步加载，也有人说做代码切割，那这个家伙到底是用来干嘛的？其实说白了，它就是把js模块给独立导出一个.js文件的，然后使用这个模块的时候，webpack会构造script dom元素，由浏览器发起异步请求这个js文件。
近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案。思考的主要问题点如下： 如何使各个子业务模块的按需加载 css预处理方案的选择 如何引入现代的前端工程思想，也就是工程
初学者，有不足的地方希望各位指出 一、前言 ocLoayLoad是AngularJS的模块按需加载器。一般在小型项目里，首次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来，这样子的加载策略让网速初始化速度变得越来越慢，用户体验不好。二来，分模块加载易于团队协作，减低代码冲突。 二、按需加载的对象 各个Controller模块、Directive模块、Server模块、template模板，其实这些都是一些 .js文件或者 .html文件 。 三 、按需加载的场
| 导语 最近特别火的狼人杀和最近特别火的React Native会擦出什么样的火花呢？本文和您一同探讨RN性能优化的现实场景。 项目简介： 狼人杀游戏是多人实时性游戏，对流畅度等性能都有要求。作为大型游戏，无论从代码规模和迭代速度来看，手Q的安装包和版本迭代速度都无法用native来承载这样的游戏。从而React Native成为了比较好的选择。 手Q React Native 简介 在手Q目前使用的React Native 版本是0.15版本。下面的数据分析都是基于手QRN0.15版本进行的分析数据
no-clean表示打包时不删除build文件夹（https://cli.vuejs.org/zh/config/#outputdir） 作用就是为了后边的按需打包，下表。
当我们不用cli，而是自己搭建项目架子的时候，会用到webpack构建我们的项目，在用webpack构建项目的时候，过长的打包编译时间和庞大冗余的代码会让我们感到头疼。所以优化webpack性能成为了不可或缺的一部分。下面我们一起来探讨webpack性能优化细节。
今天终于得空了，我要把 kui 说明文档这个项目优化下。打开太慢了，就是这个 http://k-ui.cn
这是山月关于高级前端进阶暨前端工程系列文章的第 M 篇文章 (M 随便打的，毕竟也不知道能写多少篇)，关于前 M-1 篇文章，可以从我的 github repo shfshanyue/blog[1] 中找到，如果点进去的话可以捎带~点个赞~，如果没有点进去的话，那就给这篇文章点个赞。。今天的文章开始了
webpack并不强制你使用某种模块化方案，而是通过兼容所有模块化方案让你无痛接入项目。有了webpack，你可以随意选择你喜欢的模块化方案，至于怎么处理模块之间的依赖关系及如何按需打包，webpack会帮你处理好的。
在实例化的过程中，通过Object.defineProperty()会对a.b添加getter和setter，同时Vue.js会对模板做编译，解析生成一个指令对象（这里是v-text指令），每个指令对象都会关联一个Watcher,当对a.b求值的时候，就会触发它的getter，当修改a.b的值的时候，就会触发它的setter，同时会通知被关联的Watcher，然后Watcher就会再次对a.b求值，计算对比新旧值，当值改变了，Watcher就会通知到指令，调用指令的update()方法，由于指令是对DOM的封装，所以就会调用DOM的原生方法去更新视图，这样就完成了数据改变到视图更新的一个自动过程
该插件主要作用是省去每次使用一个自定义组件，或UI组件库的组件时对组件的引入。兼容不同UI组件库，需要在安装对应UI组件库的前提下，并引入对应UI组件库的 resolvers。
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22 2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23 3、React第三方组件1(路由管理之Router的使用③传参)---2018.01.24 4、React第三方组件1(路由管理之Router的使用④按需加载-上)---2018.01.25 5、React第
前段时间一直在研究 react ssr技术，然后写了一个完整的 ssr开发骨架。今天写文，主要是把我的研究成果的精华内容整理落地，另外通过再次梳理希望发现更多优化的地方，也希望可以让更多的人少踩一些坑，让更多的人理解和掌握这个技术。
1.AngularJS按需加载 AngularJS主要应用开发SPA(Single Page Application)项目，所以在小型项目中，services、filters和controllers都在index.html中加载。Google给的AngularJS官方的angular-seed和angular-phonecat都是这样。 对于复杂一点，大型的项目，如果所有的内容一开始就加载，对首页的性能影响比较大，即使静态javascript文件使用CDN，对性能还是有很大的影响。所有需要引入按需加载机制，
随着项目日渐“强壮”，优化首屏加载渲染速度迫在眉睫，其中就采用了 React 框架提供的 Reat.lazy() 按需加载的方式，测试过程中，在我们的埋点监控平台上，发现了很多网络请求错误的日志，大部分来自分包资源下载失败！难道我的优化变成负优化了？？？
Webpack构建速度优化基本优化完毕，接下来考虑的就是：线上代码质量的优化，即如何使用webpack构建出高质量的代码 Webpack构建流程：初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件 提纲 本次优化构建代码质量基本技术： reactRouter按需加载； 公共代码提取，以及代码压缩； CDN接入； 开启gzip压缩； 接入treeShaking，剔除无用代码 开启Scope Hoisting （生产环境代码构建）为实时查看
本项目是淘系用户增长团队的一个大中台系统，单页应用，涵盖很多业务功能，运用了很多懒加载页面组件来提升性能，首屏时间 1s 左右，体验良好。然而大项目文件很多，导致构建和发布时间很长，内存占用较大。我的任务是尽可能优化与此相关的问题。
单页应用产出的入口chunk大小随着业务的复杂度线性增加，导致后期加载速度越来越慢。后面就需要对不同路径下的模块进行拆分，打包到相应的chunk下，按需加载，找到chunk的大小、个数和页面加载速度的平衡点。 解决办法 .vue模块文件按需加载，其实要做到两件事情：一是标记出这是一个异步组件；二是通知webpack把该组件单独产出为一个chunk。 vue的异步组件 官网给出的异步组件写法：异步组件是一个函数，函数的返回值是一个Promise，只是Promise的resolve函数的参数是常规组件的定
以上是最常见的React router。在简单的单页应用中，这样写是ok的。因为打包后的单一js文件bundle.js也不过200k左右，gzip之后，对加载性能并没有太大的影响。 但是，当产品经历多次迭代后，追加的页面导致bundle.js的体积不断变大。这时候，优化就变得很有必要。
新公司所有的项目基本上都是使用 react 进行开发，之前的工程师是自己使用 webpack 搭建的项目，因为涉及到的东西不多，而且存在一些问题，已经启用。同时因为项目时间原因没有太多时间自己搭建，而且自己较懒，所以选择了使用 create-react-app 进行项目的开发。
在此对webpack的性能优化进行几点声明： 在部分极度复杂的环境下，需要双package.json文件，即实行三次打包 在代码分割时，低于18K的文件没必要单独打包成一个chunk,http请求次数过多反而影响性能 prerender和PWA互斥，这个问题暂时没有解决 babel缓存编译缓存的是索引，即hash值，非常吃内存，每次开发完记得清理内存 babel-polyfill按需加载在某些非常复杂的场景下比较适合 prefetch,preload对首屏优化提升是明显 代码分割不管什么技术栈，一
最近优化了一个vue cli3.0项目，项目从打包体积2.5M，优化到272k, 速度提高了约2/3。下面将优化方法写下：
“关注 前端开发社区 ，回复“ 1” 即可加入 前端技术交流群，回复 “ 2” 即可免费领取500G前端干货！
低代码开发平台（LCDP）是无需编码（0 代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。这两年越来越多的公司和开发人员开始自研低代码平台来达到降本提效的目的。今天和大家分享一下低代码平台开发过程中遇到一个问题和对应的解决思路。
前不久写了一篇关于react脚手架（create-react-app）配置antd中css按需加载的踩坑记录，文章内容有误，原文如下react脚手架（create-react-app）配置antd中css按需加载的坑。
相对于其他静态语言，JS最大缺陷就是天生不具有模块化，没有语言层面的命名空间的概念。问题如下：
在上一次搭建后台服务的基础上，本次主要是引入了一套前端框架，当然在进行界面与接口调试的过程中，发现jpa的使用还是有一些不是很明了的地方，有些地方已经解决，而有些地方目前没有精力去处理，但是不会影响我们的正常使用。
传送门：https://blog.csdn.net/foralienzhou/article/details/73437057
移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注。据不完全统计，目前至少有30多个京东的 web 项目正在使用 NutUI 。
微信钱包内的58到家全新首页已经上线，感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题： 每个城市开通的服务项目不同，有些内容是写死在tpl中，维护非常头疼； 开通新服务或者某些UI调整（比如更换服务项的图片造成更改雪碧图）时必须走代码上线流程； 原有的前端切图、后端写逻辑的开发模式造成开发周期拉长和上线流程繁琐； 原有配置后台操作复杂，且可配置细节不完善； 首页加载速度太慢，用户体验欠佳。 58到家目前两年左右的发展期，整个技术生态还不完善。
在前端开发中提到按需加载我们通常指的是路由配置的时候通过 webpack 提供的 import 函数来异步加载页面级别的组件，当路由被实际访问的时候才去加载对应组件的资源。但随着页面组件内部的模块划分增加，要想保持优秀的页面加载效率我们不得不考虑页面组件内部进行按需加载，那么在 Vue 中defineAsyncComponent()方法为我们提供了这样的能力。
原文标题《前后端分离和模块化-58到家微信首页重构之路》【深度前端干货】 微信钱包内的58到家全新首页已经上线，感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题： 1、每个城市开通的服务项目不同，有些内容是写死在tpl中，维护非常头疼； 2、开通新服务或者某些UI调整（比如更换服务项的图片造成更改雪碧图）时必须走代码上线流程； 3、原有的前端切图、后端写逻辑的开发模式造成开发周期拉长和上线流程繁琐； 4、原有配置后台操作复杂，且可配置细节不完
element ui 是比较大的组件库，打包后接近800KB很占内存，一般采用按需加载的方式
此时浏览器会访问 http://localhost:8080/ ，看到 Welcome to Your Vue.js App 的界面就算成功了。
可以通过上述的一般用法在 Vue 中直接使用 svg，但既然已经是用 Vue来组件化开发项目了，那么在组件中穿插着一大段的 svg 也显得过于杂乱；
按需加载模块的目的是实现代码分隔，用户打开首页时不用下载全部的代码，打开特定的页面加载特定的代码。提高用户体验。
低代码开发平台（LCDP）是无需编码（0代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。这两年越来越多的公司和开发人员开始自研低代码平台来达到降本提效的目的。今天和大家分享一下低代码平台开发过程中遇的一个问题和对应的解决思路。
1.3 对于一些插件，如果只是在个别组件中用的到，也可以不要在 main.js 里面引入，而是在组件中按需引入
通常用 Vue.js 编写单页应用（SPA）时，当加载页面时，所有必需的资源（如 JavaScript 和 CSS 文件）都会被一起加载。在处理大文件时，这可能会导致用户体验不佳。
异步加载 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 但是,这种情况下一个组件生成一个js文件
最近在项目内部创建了一个vue组件库，希望通过组件库的形式，统一项目中组件的逻辑和样式，让代码的复用性更强。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
