文章列表
吴浩麟 于 18天前发表 1554 2 0
[http://7tszky.com1.z0.glb.clouddn.com/FnewH1hoBQjJKWzMazCkmSrPxOSb] webpack是当下最流行的js打包工具,这得益于网页应用日益复杂和js模块化的流行。 webpack2 [https://webpack.js.org] 增加了一些新特性也到了预发布阶段,是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 优化输出 打包结果更小可以让网页打开速度更快以及简约宽带。可以通过这以下几点做到 压缩CSS css-loader 在webpack2里默认是没有开启压缩的,最后生成的css文件里有很多空格和tab,通过配置 css-loader?minimize 参数可以开启压缩输出最小的css。css的压缩实际是是通过 cssnano [http://cssnano.co] 实现的。 TREE-SHAKING
18天前
构建工具
jerytang 于 20天前发表 364 1 1
代码压缩的现状 下面是一个使用 react 的业务的代码依赖,但是实际上业务代码中并没有对依赖图中标识的模块,也就是说构建工具将不需要的代码打包到了最终的代码当中。显然,这是很不合理的。 unneed_deps [http://pub.idqqimg.com/pc/misc/files/20161230/31607a2f657c4086adbf1bfd98063934.png] $webpack--profile--json--configwebpack/config.common.js > stats.json$#将stats.json上传到http://alexkuz.github.io/webpack-chart/可视化entry的依赖 随着 es6 的普及使用,由于 es6 的 模块是语言层面支持的,方便做静态分析,让进一步的代码优化成为可能,也就是我们今天要讨论的 tree-shaking。
20天前
构建工具
黄龙 于 1个月前发表 313 0 0
不清楚fis3是什么的可以先看这个链接 http://fis.baidu.com/ [http://fis.baidu.com/] 背景 从fis的官方文档上看,fis 除了deploy 插件是支持异步的其它都不支持。但是有好多node包 都是异步,怎么才能让fis支持异步插件呢? 举个例子 最近看到有一个 gulp-lzmajs [https://github.com/andot/gulp-lzmajs] 的插件,我尝试把它改成fis3插件。 接下来我们要思考下面几个问题 1. 做什么阶段的插件? 2. lzma库是异步调用的,怎么处理? 第一个问题:fis3把构建分成了三个阶段【编译】【打包】【发布】,当然我们只希望所有文件打包好之后再做js文件的lama压缩,所以做打包阶段的插件,扩展postpackager 第二个问题:我们需要一个很神奇的包 deasync DEASYNC github: https://github.com/abbr/deasync [https://github.com/abbr/deasync] 用法:
1个月前
构建工具
江源 ,非常让人头疼…… 于 5个月前发表 745 1 0
原文http://jiangyuan.me/blog/2016/08/13/babel/ [http://jiangyuan.me/blog/2016/08/13/babel/] 最近总算有点时间能系统的梳理下 babel 。入门或者使用手册什么的直接查看“ 参考文章 [#wafaha] ”即可,我只说说我的理解。 插件 Babel is built out of plugins. * babel-core 只是个插件加载器, presets 是一组插件,避免繁琐地一个一个安装插件。 * preset es2015 [http://babeljs.io/docs/plugins/preset-es2015/] 可以很好的编译 es6 ,唯独对常用的 class property 无能为力,快使用插件 Class properties transform [http://babeljs.io/docs/plugins/transform-class-properties/] 。
5个月前
构建工具
黎清龙 于 6个月前发表 1690 0 0
WEBPACK 学习小结 1 前言 打包,本质来说就是把许多零散的文件有序的合并成为一个文件,达到前端优化的效果 它的前世今生就不说了,感兴趣的同学可以去学习相关知识 构建 != 打包,反之亦然 打包可以说是构建的一环,构建可以做更多的事情 但是,打包永远都是构建的一个核心 1.1 相关工具 打包工具有很多,下面稍微介绍一下笔者认识的: 1.1.1 GRUNT 准确来说,grunt 是个构建工具 它只是提供了一些基础能力,出现的较早,社区强大 1.1.2 GULP gulp 和 grunt 很像,就不多聊了 1.1.3 FIS 可以说,fis 比较大,对整个打包过程有一个核心规范和流程,并且总结并提供了打包构建中的3个核心能力 fis 是一个很值得去学习的构建框架 1.1.4 WEBPACK 这个应该是目前最受欢迎与关注的工具了 就个人学习而言,相比其他工具,webpack 是一个专注于打包的工具,因为专注,所以强大 2 打包原理 打包过程实际上很简单,也非常直观,其逻辑如下图所示:
6个月前
构建工具
黄龙 于 9个月前发表 1582 0 1
名词介绍 webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片Riot的tag文件等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块。 Riot是一个类似React的微型 UI 库,具体可以见 【微型UI库Riot介绍】 [http://imweb.io/topic/56fd61d2b4a205f5063ee056] Redux 是 JavaScript状态容器,提供可预测化的状态管理。 配置项目 1.首先创建package.json文件 mkdir riot-redux cd riot-redux npm init 2.安装 给package.json添加依赖描述 ... "scripts": { "dev": "webpack-dev-server" }, ... "dependencies": { "babel-core": "^6.3.17", "babel-loader": "^6.2.0",
9个月前
构建工具
袁飞翔 于 10个月前发表 1095 3 1
部分插件 * fis3-hook-lego [https://github.com/imweb/fis3-hook-lego] 查找文件 * fis3-hook-annotation [https://github.com/imweb/fis3-hook-annotation] 文件注解 TIP 1、勿使用LEGO_MODULES文件全路径 <scriptsrc="/lego_modules/zepto/1.1.7/zepto.js"></script> 直接 <scriptsrc="zepto"></script> js require: // js/** * @require "zepto" */ 2、不需要被DEFINE包裹的文件使用 @NOWRAP 文件注解标示 /** * @noWrap */// ..file code 3、默认不对LEGO_MUDLES下的文件做BABEL,特殊文件需要使用 @ES6 标示 /** * @es6 */// ..file code 4、不需要加HASH的图片放置 */IMG/NOHASH/ 目录下
10个月前
构建工具
helinjiang 于 1年前发表 1409 1 0
最近写了两个Grunt插件( grunt-htmlstamp [https://www.npmjs.com/package/grunt-htmlstamp] 和 grunt-file-modify [https://www.npmjs.com/package/grunt-file-modify] ),已经用在自己的项目中,用得很开心。本文便是记录了Grunt插件开发的一些关键的点,作为笔记,比较简明扼要,更适合对Grunt有一些了解的同学,一些基础的知识请自行 Google 之。 本文中的演示在 windows 操作系统中,Linux 或 OS X 可能有一些小区别。 一、环境准备 1. 安装 NODE.JS 在 Node.js 官网 [https://nodejs.org/] 选择合适的版本下载并安装。安装完成之后,打开 cmd 命令窗口,输入 node -v ,如输出版本号,则证明安装成功。 2. 安装 GRUNT-CLI
1年前
构建工具
袁飞翔 于 1年前发表 1291 3 0
首先看一个有趣的问题 // fis-conf.js fis.hook('commonjs') .match('/modules/common/utils', { isMod: true, moduleId: 'utils'// 为utils设置一个moduleId,希望以后能直接require('utils') }) .match('::package', { postpackager: [ fis.plugin('loader', { resourceType: 'commonJs' }) ] }) <!-- main.html --><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><!-- etc.. ---><script>require('utils')
1年前
构建工具
黎清龙 于 1年前发表 1463 3 0
FIS3 新特性应用 1 前言 fis3相比fis2,核心思路并没有改变 还是围绕3个核心做处理: * 资源嵌入 [http://fis.baidu.com/fis3/docs/user-dev/inline.html] * 资源定位 [http://fis.baidu.com/fis3/docs/user-dev/uri.html] * 声明依赖 [http://fis.baidu.com/fis3/docs/user-dev/require.html] 而整体 构建流程 [http://fis.baidu.com/fis3/docs/build.html] 也没有做过多的改动。 fis3相对于fis2来说,用户更容易使用,给插件开发者提供更多的能力 这主要体现于以下两点: 1. 类似css的覆盖式配置方式,不需要用命令行参数来进行配置 2. 提供许多事件锚点 这篇文章主要介绍的就是第2点,讲解fis3提供的特殊事件,及其作用。 2 LOOKUP:FILE fis3 在查找文件资源的时候,通过统一的接口【fis.project.lookup】查找
1年前
构建工具
helondeng 于 1年前发表 1883 1 0
项目构建迁移到fis体系后,打包的问题就跟着来了。打包的基本方式是:分析依赖,合并文件,解决引入。 CSS处理方式 来源 * link 引入 * require 引入 * 其它模块的同名依赖 提取来源 * 正则匹配link * require的方式可以直接通过 file.requires获取 * 处理方式略复杂,需要在分析js依赖时,判断依赖是css文件 打包逻辑最粗暴的方式是allInOne,全部打成一个包。但是多个页面的业务中,有重复的代码被打到了不同的文件中。这种情况下,打包成2个文件比较合适: 一个基础样式,一个页面样式 。 common,reset等公共样式打包成一个文件,Page 级别的样式打包成一个文件 ,common级的样式,每个页面都引入(加载可以利用缓存),页面级样式根据自身的依赖引入不同的文件。 问题 1. 哪些算是公共样式? common文件夹下的所有样式文件? common打包必须要有通用性,确保能够覆盖到大部分(甚至全部)页面,同时又不会太冗余,给页面带来很多不必要的样式 ,这里必须要有一些规则来约束。 1. 打包的灵活性?
1年前
构建工具
ouven ,https://ouvens.github.io/ 于 1年前发表 6206 4 0
一、安装 * 安装初始化 npm i -g fis3 fis3 -v fis3 init 二、配置 类似Gruntfile.js或Gulpfile.js,新建fis-config.js文件 配置api介绍如下: FIS.SET(KEY, VALUE) 设置一些配置,如系统内置属性 project、namespace、modules、settings。 fis.set 设置的值通过fis.get()获取 FIS.GET(KEY) 获取已经配置的属性,和 fis.set() 成对使用 FIS.MATCH(SELECTOR, PROPS, [, IMPORTANT]) 给匹配到的文件分配属性,文件属性决定了这个文件进行怎么样的操作;fis.match 模拟一个类似 css 的覆盖规则,负责给文件分配规则属性,这些规则属性决定了这个文件将会被如何处理;另外,后面分配到的规则会覆盖前面的; fis.match('{a,b}.js', { release: '/static/\$0' }); fis.match('b.js', {
1年前
构建工具