前端工程化
关注
分享
扫一扫
浴盆
这个作者很懒，什么都没留下…
展开
-
webpack入门(2)
我们首先上一个github上对webpack工作的简单示意图webpack可以将我们各种后缀的文件，最后打包成浏览器需要的js，png，css等。然后我们来翻译一下webpack上面的介绍 webpack has two types of dependencies in its dependency tree: sync and async. Async dependencies act as s原创 2017-03-18 16:24:03 · 597 阅读 · 0 评论 -
webpack入门(3)
自动化生成项目中html页面这里我们可以用到一个插件，叫做html-plugin npm install html-webpack-plugin --save-dev我们继续在webpack.config.js中配置，在配置中使用的key是plugins，需要通过数组进行初始化 var htmlWebpackPlugin = require('html-webpack-plugin');翻译 2017-03-18 21:29:59 · 319 阅读 · 0 评论 -
高性能网站建设指南总结
减少HTTP请求多数服务端渲染的页面只有10%-20%的最终用户响应时间花在了所请求的HTML文档上，剩下的80%-90%的时间花在为HTML文档所应用的所有组件(图片，脚本，样式表，Flash等)进行的HTTP请求上。因此改善响应时间的一个途径是减少组件数量。 CSS Sprites是一个减少图片请求的方法。 内联图片，通过使用data: URL模式可以在Web页面中包含图片但无需任何额外的H原创 2017-02-03 17:42:45 · 498 阅读 · 0 评论 -
webpack热更新原理
开发环境页面热更新早已是主流，常见的需求如赛事网页推送比赛结果、网页实时展示投票或点赞数据、在线评论或弹幕、在线聊天室等，都需要借助热更新功能，才能达到实时的端对端的极致体验。 webpack-hot-middleware webpack-hot-middleware中间件是webpack的一个plugin，通常结合webpack-dev-middleware一起使用。借助它可以实现浏览器翻译 2017-05-06 13:28:48 · 14633 阅读 · 1 评论 -
webpack入门(1)
首先什么是webpack？如果说它是一个打包工具那真的是有点大材小用了。webpack是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安装，最终实现你需要的功能并进行打包输出。传统项目中的问题在不依赖任何自动化、模块化工具的项目中，通常我们的代码是这样的： index.html <html> <head> <title翻译 2017-02-24 22:22:53 · 503 阅读 · 0 评论 -
前端模块的历史进程
模块机制产生原因 最初我们是这么写代码的 function foo(){ //... } function bar(){ //... } Global 被污染，很容易命名冲突 简单封装：Namespace 模式 var MYAPP = { foo: function(){}, bar: function(){} } MYAPP.foo();翻译 2017-02-27 16:40:14 · 450 阅读 · 0 评论 -
require.js源码分析
在整个require中，主要的方法就两个：require和define，我们先来看require require require作为主函数来引入我们的“模块”，require会从自身的的存储中去查找对应的defined模块，如果没有找到，则这时这个模块有可以存在三种状态：loading, enabling, defining 这就是require中要注意的地方，如果模块还没有被加载，那么它的原创 2017-09-16 23:04:25 · 425 阅读 · 0 评论 -
js抽象语法树
function add(a, b) { return a + b } 这个语法块，是一个FunctionDeclaration(函数定义)对象。拆解之后包括 一个id，就是它的名字，即add 两个params，就是它的参数，即[a, b] 一个body，也就是大括号内的一堆东西 add没办法继续拆下去了，它是一个最基础Identifier（标志）对象，用来作为函数的唯一标志 ...翻译 2018-09-08 14:53:36 · 1881 阅读 · 0 评论