JDC | 京东设计中心

10Aug.

Webpack打包实用优化方案

作者：汪楠简介: Webpack是当下最热门的前端资源模块化管理和打包工具。如何提升打包效率，成为了大家关注的点之一。下文将分享我们开发到上线的实用优化方案。目前最火的打包工具莫过于 Webpack 了，关于 Webpack 的优化方案，网上有很多文章可以供大家参考。查阅前人的资料，总结自己在项目中遇到的问题，最终得出一些比较实用的优化方案，本文将与大家一一分享。既然是打包优化，那么我们需要时刻关注以下几点：减少编译时间减少编译输出文件大小提高页面性能 Webpack3.0 的 Scope Hoisting (作用域提升) Webpack3.0 最大的一个新功能就是 ScopeHoisting （作用域提升）。曾经的 Webpack 是将每一个模块（每一个被 import 或者 require 的代码） bundle 到每一个独立的闭包函数里。这会导致 bundle 的文件里，每一个模块外层都会有一些特殊的闭包包装，导致文件增大，同时它也使得编译后的 js 文件在浏览器中的执行效率降低。虽然，理论知识已经了解，但我们还是用实际操作来验证一下：开启 ScopeHoisting 非常简单，因为 webpack 已经内置了这个功能，在插件入口处新增 new webpack.optimize.ModuleConcatenationPlugin()。

plugins:[
new webpack.optimize.ModuleConcatenationPlugin()
]
我们简单的编写两个文件 app.js 和 timer.js。

import timer from './timer'
var time = (new Date()).getTime();
timer();
console.log('hello webpack'+time);
export default function bar(){
console.log('pig');
}
var path = require('path');
var webpack = require('webpack');
var config = {
entry:{
app:'./src/app.js'
},
output:{
filename:'bundle.js',
path: path.resolve(__dirname,'./build')
},
plugins:[
//new webpack.optimize.ModuleConcatenationPlugin()
]
}
module.exports = config;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

plugins:[

new webpack.optimize.ModuleConcatenationPlugin()

]

我们简单的编写两个文件 app.js 和 timer.js。

import timer from './timer'

var time = (new Date()).getTime();

timer();

console.log('hello webpack'+time);

export default function bar(){

console.log('pig');

}

var path = require('path');

var webpack = require('webpack');

var config = {

entry:{

app:'./src/app.js'

},

output:{

filename:'bundle.js',

path: path.resolve(__dirname,'./build')

},

plugins:[

//new webpack.optimize.ModuleConcatenationPlugin()

]

}

module.exports = config;

执行编译后，结果如下： bundle.js 大小是3.03KB 我们把 new webpack.optimize.ModuleConcatenationPlugin() 打开，编译结果如下：对比两个的区别大家可以发现，在 bundle.js 中 Webpack2.0 比 Webpack3.0 多了以下的代码： […]

Frans

30Mar.

漫谈Vue组件库开发

2017年是Vue.js大爆发的一年，React迎来了一个强有力的竞争对手，王者地位受到挑战（撰写此文时github上Vue与React的star数量已逼近）。我们团队这一年有十多个大型项目采用了Vue技术栈，在开发效率、页面性能、可维护性等方面都有不错的收效。我们希望把这些项目中可复用的功能组件提取出来，给后续项目使用，以减少重复开发，提高效率，同时也为了致敬前端界“出一个框架，造一遍轮子”的行规，一个基于Vue 2的移动端UI组件库被提上日程。组件库的开发过程总的来说还是比较顺利的，这里与大家分享一些问题与思考。脚手架选择尽管我们团队的这些Vue技术栈项目的脚手架大都使用的是webpack，在为组件库选择脚手架的时候我们还是在webpack与Rollup中犹豫了一下。 Rollup看起来更适合组件库的开发，它把所有模块构建在一个函数内，执行效率更高，它支持Tree Shaking，只打包需要的代码，输出文件更小（webpack后来也支持了）。但综合考虑之后，我们还是选择了webpack作为打包工具。首先，按照规划，demo演示和文档页面也在这个脚手架中，所以对代码分割、热加载等功能是有需求的，而这方面能力Rollup远不及webpack。另外，这个组件库由多人开发维护，基于现有webpack脚手架开发成本更低、效率更高。选择webpack，让我们可以更专注于造轮子。打包即便选择了webpack作为打包工具，我们也并不希望这个库的使用场景局限在webpack项目中，通过AMD方式、甚至通过script标签直接引用等场景都应该得到支持。为了达到这个目的，我们需要在webpack配置文件中设置输出格式，需要配置的选项是output.libraryTarget，有以下可选值： “var”（默认值）输出为一个变量

var MyLibrary = _entry_return_ ;

1	var MyLibrary = _entry_return_ ;

“this” 输出为this的一个属性

this["MyLibrary"] = _entry_return_ ;

1	this["MyLibrary"] = _entry_return_ ;

“window” 输出为window对象的一个属性

window["MyLibrary"] = _entry_return_ ;

1	window["MyLibrary"] = _entry_return_ ;

“global” 输出为global对象的一个属性

global["MyLibrary"] = _entry_return_ ;

1	global["MyLibrary"] = _entry_return_ ;

“commonjs” 输出为exports 的一个属性

exports["MyLibrary"] = _entry_return_ ;

1	exports["MyLibrary"] = _entry_return_ ;

“commonjs2” 以module.exports形式输出

module.exports = _entry_return_ ;

1	module.exports = _entry_return_ ;

“amd” 输出为AMD模块 “umd” 暴露给所有模块定义，允许它和CommonJS/AMD/全局变量一起工作很显然，我们需要把output.libraryTarget的值设为“umd”，以使我们的库可以工作在各种场景下。另一个与库打包有关的设置项是output.umdNamedDefine，在output.libraryTarget 设为umd，且output.library 也设置了的情况下，把此选项值设为true，将会为AMD模块命名。

webpackConfig.output = {
    path: path.resolve(__dirname, 'dist'),
    publicPath:"/",
    filename: '[name].js',
    library: 'xxx', //模块名称
    libraryTarget: 'umd', //输出格式
    umdNamedDefine: true //是否把模块名作为AMD输出的命名空间
};

1

2

3

4

5

6

7

8

webpackConfig.output = {

path: path.resolve(__dirname, 'dist'),

publicPath:"/",

filename: '[name].js',

library: 'xxx', //模块名称

libraryTarget: 'umd', //输出格式

umdNamedDefine: true //是否把模块名作为AMD输出的命名空间

};

Vue组件库只提供组件，Vue文件自身需要组件库使用者在项目中自行引入，库中无需打包。所以我们可以把Vue加到externals中。

externals: {
    vue: 'vue'
}

1

2

3

externals: {

vue: 'vue'

}

这样Vue就不会被打包。不过，有个问题，就是用script标签的形式引用Vue的时候，挂在window上的变量名是“Vue”，而不是我们需要的”vue”，因此使用时会报vue未定义的错误。还好，webpack的externals配置项支持传入一个对象，可以为不同导出形式指定不同名称。所以下面这种写法可以解决这个问题。组件类型规划中的Vue组件库包含组件（Component）、指令（Directive）和过滤器（Filter）三种类型的存在。比较特殊的是模态弹窗类（Modal）组件，如Dialog、Toast等等。页面中可能存在很多个Modal，而很多场景下用户的行为只会触发其中一部分，如果把所有可能弹出的Modal（特别是异步的、结构内容复杂的Modal）全部写在页面上，是否妥当？对于多页面应用，每个页面都写一遍或者再封装一层组件是否繁琐而冗余？这个问题在知乎上引发过讨论，尤大（Vue.js作者尤雨溪）本人在参与讨论时给出建议，组件多层嵌套时，应该把Modal放在根组件里，然后在子组件里通过事件触发。在具体应用里，应该这么用，这符合Vue提倡的“状态驱动”。不过在组件库里，我们还是希望提供一种更便捷更通用的方式来使用Modal类型的组件。参考了Element UI等优秀组件库的做法，我们把Modal类型的组件挂到了Vue.prototype上，使之成为Vue的实例方法，一次安装、全局调用。

this.$dialog(options);

1	this.$dialog(options);

因此，我们的组件库组件类型还包括“实例方法”。组件CSS作用域对于一个组件，我们希望它的CSS只作用于当前组件内的元素，所以我们给每个组件的Vue单页面文件的style标签加上了scoped属性。编译后，HTML标签会被自动添加一个随机生成的唯一属性（比如 data-v-f3f3eg9），同时对应的CSS选择器也会增加同名的属性选择器（如.example[data-v-f3f3eg9]），这样组件内的 CSS […]

Vicky.Ye

13Oct.

《京东E维》基于VUE+Webpack的单页面实践

本篇文章和大家聊一聊我们近期的项目——京东E维平台，这是一个专门为运维工程师设计的工单处理系统。它所要肩负的任务是，针对公司内部所有员工在办公时遇到的有关计算机、网络、软件方面等问题，通过E维平台发起问题上报请求。工程师通过该系统可以根据上报工单的紧急程度进行抢单、解决事件单、流转事件单、退回请求广场、挂起事件单等操作，这个系统一定程度上起到了提高办公效率的作用。在与产品和研发沟通过后，我们发现，这个项目基本上所有交互部分都放在前端这里，研发只提供接口，可以做到前后端分离。因此经过小组讨论后，决定用 Vue 去实现。基于京东 E 维平台视觉稿的统一性，且页面较少，关联性较强，加上之前在会员PLUS项目中使用 Vue + Webpack 的经验教训，对该项目我们决定尝试着用vue的单页面开发模式进行开发。初试Vue单文件组件开发页面，我们遇到了一些问题，也总结了一些经验，以下是我们的一些总结（下图为界面总览）：请求广场页面：我的事件页面：事件单详情页：本篇文章适合具有 Vue 和 webpack 基础的同学，里面的具体配置和vue用法并未写的过于详细。 Vue+Webpack 单页面的文档结构与构建方法项目构建的目录结构如下：先和大家介绍下我们的思路，进入项目的第一层，是src文件夹以及各种配置文件。接下来src目录下的文件功能如下： ♦ component 用来存放功能组件 ♦ css 存放所有样式文件 ♦ image 用于存放图片 ♦ view 存放业务上的各个单文件 vue 页面组件 ♦ app.js 是入口文件 ♦ app.vue 渲染最高级路由匹配到的组件用的出口 vue 文件 ♦ index.html 页面模板 ♦ router.js 为配置各种跳转信息的路由文件 1、首先是 package.json […]

Avin

27June

ELF – 灵活可扩展的 HTML5 构建工具

ELF，意为小精灵，来自 War3 中暗夜精灵族的农民。通常当我们开始一个新的 HTML5 场景营销活动项目时，需要创建项目目录，初始化基本的项目文件，然后再添加构建（grunt/gulp/webpack）相关的文件（一次两次三次…，像小精灵采木一样~)，目前有不少工具可以帮我们解决一部分这种重复性的工作，但不能完全的解决，于是，就有了小精灵 – ELF。快速上手 1. 安装通过 npm 全局安装（依赖的包比较多，推荐使用淘宝的 npm 镜像进行安装）

# mac/linux
$ SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs/ npm install -g elf-cli --registry=https://registry.npm.taobao.org
# windows
$ npm install -g elf-cli --registry=https://registry.npm.taobao.org --SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ --PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs/

1

2

3

4

# mac/linux

$ SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs/ npm install -g elf-cli --registry=https://registry.npm.taobao.org

# windows

$ npm install -g elf-cli --registry=https://registry.npm.taobao.org --SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ --PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs/

安装好后，可以运行 elf –help 查看支持的命令和帮助说明。 2. 初始化项目假如我们现在要做一个向下整页滑屏的 HTML5 项目

# 运行初始化命令，基于 swiper template 初始化项目
$ elf init -t swiper demo-swiper
# 进入项目目录，安装依赖
$ cd demo-swiper && npm install
# 运行（开发模式）
$ elf start

1

2

3

4

5

6

# 运行初始化命令，基于 swiper template 初始化项目

$ elf init -t swiper demo-swiper

# 进入项目目录，安装依赖

$ cd demo-swiper && npm install

# 运行（开发模式）

$ elf start

这样一个向下整页滑屏的 HTML5 项目就已运行在开发模式上，样式预处理自动编译、样式热加载等功能早已具备，在此基础上，你就可以开始按照你的需求愉快的开发了。 3. 部署当项目开发完成之后，需要将代码合并压缩用于部署，运行

elf build

1

elf build

会生成一个 dist 文件夹用于部署。整个流程下来，基本解决了 HTML5 项目开发过程中项目初始化和构建部分的重复工作，已在团队内广泛使用，包括 Q4 京东品牌运营的10多个 H5 项目，如皇家视频京东精选功能介绍 ELF 主要包括三部分功能：项目构建、示例模板和通用组件。项目构建现在在做 web 开发时，基本都会引入构建工具，常用的有 grunt、gulp 以及目前最流行的 […]

Webpack打包实用优化方案

漫谈Vue组件库开发

《京东E维》基于VUE+Webpack的单页面实践

ELF – 灵活可扩展的 HTML5 构建工具

CATEGORIES

TAGS

LINKS