文章目录

前端·禁地

标签: js (5)

记一次使用 vue-admin-template 的优化历程 置顶!

前言 公司有好几个项目都有后台管理系统,为了方便开发,所以选择了 vue 中比较火的 后台模板 作为基础模板进行开发。但是,开始用的时候,作者并没有对此进行优化,到项目上线的时候,才发现,打包出来的文件都十分之大,就一个 vendor 就有 770k 的体积(下图是基础模板,什么都没加打包后的文件信息): 通过 webpack-bundle-analyzer 进行分析可得,体积主要来源于 饿了么UI(体积为 500k),因为没对其进行部分引入拆分组件,导致 webpack 把整个组件库都打包进去了。其次就是 vue 本身,体积也达到了 80k 之大。 所以,对其进行打包优化,是一件刻不容缓的事情。 优化 优化主要目的有: 加快资源加载速度,减少用户等待的时间和首页白屏时间,提高用户体验。 加快打包速度,不要将时间浪费在等待打包上。 解决第一个问题,很多人都会想到资源文件放在 CDN 上就好了,没错,这次我们就是通过 CDN 来解决加载问题。 CDN - 提高加载速度 像 vue, element ui 这些比较成熟的框架/组件库,一般都有免费、高速、公共的 cdn 供开发者使用….

慕课网 Gallary-by-React 学习笔记

项目地址 该项目是来自慕课网的实战项目 - React实践图片画廊应用(下),原实战教程中,所用到的脚手架为 yeoman 中的 generator-react-webpack 进行搭建,但是该脚手架已经快一年没有更新,而且其 2.0 版本也与食品教程中的项目结构都不一致,因此在该项目中使用了 React 官方团队维护的 creat-react-app 作为脚手架搭建项目。 项目中使用 es6 的语法,并且对各个组件和功能模块进行了拆分,实现可复用,高定制的效果。 技术栈 ES6 React(version: 16.1) webpack(version: 3) creat-react-app sass / scss suport 踩坑 安装脚手架 $ npm install -g create-react-app 使用脚手架新建项目 $ create-react-app my-project $ cd my-project $ npm start 处理 scss/sass 文件 #### 处理方法一(脚手架官方推荐): 先安装 node-sass-chokidar ….

插件分享大会[不定期更新]

最近老是在重装系统,每次重装就要重新配置环境,安装软件,安装插件。每次重装的时候,都不知道自己以前到底用过什么软件插件。所以,还是写一篇文章记录下来,顺便和大家分享一下我的开发环境吧。

Without jQuery:lazyload.js 有更新!

使用原生的js实现简易的图片延时加载。

Without jQuery:event.js 有更新!

使用原生的js实现简易的事件委托。