说在前面

由于使用了React直出,页面各项性能指标使人悦目。本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码分包、异步模块加载特性。看看它们又是如何对PC部落的性能起到进一步的催化作用。

为什么要使用webpack

如果你曾经使用过 Broserify, RequireJS 或类似的打包工具,并注重:代码分包、异步加载、静态资源打包(图片/CSS)。那么 webpack 就是帮你构建项目的利器!简单一句话:在webpack中,所有资源都被当作是模块,js可以引用 css , css 中可以嵌入图片 dataUrl。

webpack特性

对应不同文件类型的资源,webpack有对应的模块 loader ,比如对于 less, 使用的是 less-loader,你可以在这里找到 所有loader. webpack 具有requireJS 和 browserify 的功能,但仍有自己的新特性: 1、对 CommonJS、AMD、ES6的语法做了兼容; 2、对js、css、图片等资源文件都支持打包; 3、串联式模块加载器以及插件机制让其具有更好的灵活性和拓展性,例如对 coffeeScript、ES6的支持; 4、有独立的配置文件 webpack.config.js; 5、可以将代码切割成不同 chunk,实现按需加载,降低了初始化时间; 6、支持 SourceUrls 和 SourceMaps,易于调试; 7、具有强大的 Plugin 接口,大多是内部插件,使用起来比较灵活; 8、webpack 使用异步 IO 并具有多级缓存,使得 webpack 在增量编译上更快!

为什么混用Grunt和webpack

自React诞生以来,耳熟能详的是 React+webpack 开发大法,而且在大多数 React 网络教程中也很少提及同时采用了 Grunt 联合构建项目。

Grunt 可以对整个项目文件做复制、删除、合并、压缩等等。而Webpack 的优势在于对静态文件(js/jsx/coffeeScript/css/less/sass/iamges)按不同模块加载(包括按需加载)——这正是我们对webpack感兴趣的地方,各个模块组建化(可以将一个组建的图片、样式、脚本、页面放在同一个文件夹中)。所以,在项目中二者分工不同,各司其职。

注:使用 gulp 替换 grunt 当然也是没有问题。

webpack配置

webpack 有多种配置方式,由于PC部落中静态资源文件较多,使用配置文件进行打包会方便很多。

通常情况下,如果我们只使用 webpack 构建项目,那么配置 webpack.config.js 即可。由于在PC部落中使用了 grunt,并在 grunt 组合任务中调用 webpack 任务,因此需要在 grunt 的任务配置中添加 webpack.js(使用了load-grunt-config插件) 进行配置。

配置总览
var taskConfig = {
dev: {
entry: { // 入口文件,考虑到多页面资源缓存,我们打成多个包
"index": path.resolve(config.srcPath, "pages/index/index.jsx"),
"detail": path.resolve(config.srcPath, "pages/detail/detail.jsx"),
...
},
resolve: { // 请求重定向,显示指出依赖查找路径
alias: {
img: path.resolve(config.srcPath + 'img'),
comps: path.resolve(config.srcPath + 'pages/components')
...
}
},
output: { // 输出文件
path: config.devPath + '/js', // 文件绝对路径
filename: "[name].min.js", // 输出文件名
publicPath: "http://s.url.cn/qqun/xiaoqu/buluo/p/js/", // 公共访问路径,替换CDN
chunkFilename: "[name].chunk.min.js" // 异步加载时需要被打包的文件名
},
module: { // 各类文件 loader
noParse: [], // 忽略解析的文件
preLoaders: [{ // 预加载的模块
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'jsxhint-loader'
}],
loaders: [{ // 各式加载器
test: /\.jsx$/,
loader: 'jsx-loader',
include: path.resolve(config.srcPath)
}, {
test: /\.less$/,
// 使用“!”链式loader,从右向左依次执行
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader"),
include: path.resolve(config.srcPath)
}, {
test: /\.(jpe?g|png|gif|svg)$/i,
// inline base64url for <=1500 images
loader: 'url-loader?limit=1500&name=images/[name].[hash].[ext]',
include: path.resolve(config.srcPath)
}]
},
externals: { // 指定采用外部 CDN 依赖的资源,不被webpack打包
"react": "React",
"react-dom": "ReactDOM"
},
plugins: [
...
// 公共模块独立打包配置
new CommonsChunkPlugin("common", "common.min.js", ["index", "detail", "barindex", "search"]),
// 独立打包css文件以外链形式加载
new ExtractTextPlugin("../css/[name].min.css")
],
watch: true,
keepalive: true,
lessLoader: {
lessPlugins: [
new LessPluginAutoPrefix()
]
}
},

webpack打包优化

1、请求重定向

resolve.alias 是webpack 的一个配置项,它的作用是把用户的一个请求重定向到另一个路径。 比如:

resolve: {  // 显示指出依赖查找路径
alias: {
comps: 'src/pages/components'
}
}

这样我们在要打包的脚本中的使用 require('comps/Loading.jsx'); 其实就等价于require('src/pages/components/Loading.jsx')。这犹如《高性能javascript》中给查询压力较大的对象给了一个别名,通过使用别名可以将本例减少几乎一半的时间。

2、忽略对已知文件的解析

module.noParse,如果你确定一个模块中没有其它新的依赖,就可以配置这项,webpack 将不再扫描这个文件中的依赖。 比如我们在入口文件 entry.js 中检测到对资源src/pages/components/ueditor.min.js资源的请求,如果我们配置:

module: {
noParse: [/ueditor/]
}

noParse规则中的/ueditor/一条生效,所以 webpack 直接把依赖打包进了 entry.js。增加这样的配置会让 webpack 编译时间更短。

3、使用公用CDN

考虑到web上有很多的公用 CDN 服务,那么我们可以将 react 从 bundle 中分离出来,进而不会被 webpack 打包, 作为外部依赖引用 CDN 。 方法是使用 externals 声明一个外部依赖。 如:

module:{
externals: {
// 方式一:申明为外部依赖并指定别名
"react": "React",
"react-dom": "ReactDOM"
// 方式二:true 为外部依赖,false 则不是
a: false, // a is not external
b: true // b is external
},
}

并在 HTML 代码中加上一行

<script src="//cdn.bootcss.com/react/0.14.2/react.js">
<script src="//cdn.bootcss.com/react/0.14.2/react-dom.js">

这样我们在js中引入React = require('react') , webpack 就不会把 react 打包进来而直接引用CDN,这样做可以让 webpack 编译时间缩减一大半!

系列插件

CommonsChunkPlugin

开发中需要将多个页面的公用模块独立打包,从而可以利用浏览器缓存机制来提高页面加载效率,减少页面初次加载时间,只有当某功能被用到时才去动态加载。这就要使用到 webpack 中的 CommonsChunkPlugin 插件。

使用:
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
...
/*
* @param 1 将公共模块提取,生成名为 common 的chunk
* @param 2 最终生成的公共模块的 js 文件名
* @param 3 公共模块提取的资源列表
*/
new CommonsChunkPlugin("common", "common.min.js", ["index", "detail", "barindex", "search"])
}

ExtractTextPlugin

webpack 中编写js文件时,可以通过 require 的方式引入其他静态资源,可通过loader对文件自动解析并打包文件。 通常我们会将 js 文件打包合并,css 文件在页面header中嵌入 style 的方式载入页面。但在开发过程中我们并不想将样式打包在脚本中(最好可以独立生成css文件,以外链形式加载)。 ExtractTextPlugin 插件可以帮我们达到这样的效果。

安装:

npm install extract-text-webpack-plugin –save-dev

使用:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
...
plugins: [ new ExtractTextPlugin("../css/[name].min.css") ]
}

这样配置就可以将 js 中的 css 文件提取,并以指定的文件名来进行加载。

LessPluginAutoPrefix

顾名思义,就是autoPrefix插件,用来补全CSS的厂商前缀(-webkit-, -moz-, -o-);

使用:
var LessPluginAutoPrefix = require('less-plugin-autoprefix');
var taskConfig = {
dev: {
...
lessLoader: {
lessPlugins: [
new LessPluginAutoPrefix()
]
}
}

Code Splitting

对于一个大型的web app,我们把所有的 js 文件合成一个显然是非常低效的,因为有些 js 模块并不是我们当前页面所需要的(这会大大增加页面首屏渲染时间)。Webpack 就是这样一种神器,为您提供优质的代码分包服务,从此“妈妈再也不用担心页面按需加载的问题了”!

方式一:require

require(dependencies, callback) 遵从 AMD 规范定义的异步方法。使用该方法时,所有的依赖被异步加载并从左至右立即执行,依赖都被执行后,执行callback

方式二:require.ensure

require.ensure(dependencies, callback) 遵从 CommonJS 规范,在需要的时候才下载依赖的模块。当所有的依赖都被加载完毕,便执行 callback(注:require作为callback的参数)。 细心的同学可能还记得 output 配置中有

output: {
...
chunkFilename: "[name].chunk.min.js"
}

chunk 到底是什么? chunk 又是怎么生成的呢? 为了实现部分资源的异步加载,有些资源是不打包到入口文件里面的。于是我们使用 require.ensure 作为代码分割的标识。require.ensure 会创建一个 chunk ,且可以指定该 chunk 的名称(注:如果这个chunk已经存在了,则将本次依赖的模块合并到已经存在的chunk中),最后这个 chunk 在 webpack 构建时会单独生成一个文件。 比如我们要根据当前运行平台,加载两个不同的UI组建,那么:

var platform = Util.getPlatform();
if( platform === "ios"){
require.ensure(['./components/dialog'], function(require){
...
}, 'popup'); // 最后一个参数是 chunk 名
}
if( platform === "android"){
require.ensure(["./components/toast"], function(require){
...
}, 'popup');
}

通过webpack打包之后,会生成一个 popup.chunk.min.js 文件。在不同的运行平台上,我们会发现 popup.chuck.min.js 文件的内容是相同的(因为我们配置的 chunk 名都是 popup)。 如果我们想让按需加载的模块再次拆分成 dialog 和 toast,两个文件,仅仅需要将 require.ensure 中配置的chunk 名改不同,即可在代码被执行时加载单一文件。

注意点:

1、require :加载模块,并立即执行; 2、require.ensure:仅仅加载模块,但不会执行; 3、不用在 html 中显示调用生成的 chunk 文件,按需加载时会自动调用; 4、不用担心第三方库被反复打包的问题,因为我们已经使用 CommonsChunkPlugin 对公共部分进行提取。

Webpack打包进阶的更多相关文章

  1. Less与TypeScript的简单理解与应用,并使用WebPack打包静态页面

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 创建空项目 使用Less 使用TypeScript 使用WebPack 开始写项目 总 ...

  2. webpack 打包 todolist 应用

    写在前面的话:  一直想着手动配置webpack实现应用,正好最近这段时间比较空闲,就写了一个通过webpack打包实现todolist的简单应用.本文内容包括:通过webpack打包css,html ...

  3. 使用webpack打包ThinkPHP的资源文件

    使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...

  4. 【原】使用webpack打包的后,公共请求路径的配置问题

    在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...

  5. webpack打包avalon

    webpack打包avalon+oniui+jquery 随着avalon的发展壮大,我根据CSDN的统计数字,中国前端大概有1%的人在使用avalon了. avalon的最大优势是能兼容IE6,并且 ...

  6. 基于ES6模块标准通过webpack打包HTM5项目

    本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...

  7. webpack 打包成功,但是css不起作用

    问题: webpack 打包成功,但是css不起作用 问题分析/解决: 原因有以下几种 使用了webpack2的语法规则不正确; webpack2要求必须写-loader; 可能是只写了css-loa ...

  8. 14.如何解决使用webpack打包之后,font-awsome路径不对的问题,终极解决方法

    问题描述: 使用webpack打包vue项目,使用font-awsome字体,发现打包之后,font-awsome图标不显示,报错为路径不对 看了下打包的路径,的确路径不对,打包之后font-awso ...

  9. webpack学习--创建一个webpack打包流程

    创建一个webpack打包流程 首先安装webpack插件 mkdir webpack-demo && cd webpack-demo npm init -y npm install ...

随机推荐

  1. Qt Designer怎样加入资源文件

    Qt Designer中如果在设计UI界面的时候要加入一些图素,图标等资源的时候是不能直接添加进去的,需要在Qt开发目录下编写QRC文件 qrc文件格式如下: <RCC> <qres ...

  2. Android Studio 配置

    Android配置:[转]原地址:http://www.cnblogs.com/smyhvae/p/4022844.html [开发环境] 物理机版本:Win7旗舰版(64位) Android Stu ...

  3. POJ1351 Number of Locks(数学)

    截至写博客为止,貌似这是网上第一个采用数学公式来处理的. 网上的题解都是DFS或是动态规划,但感觉可以推公式直接用数学的方法处理,想了好久,终于推出公式. 题意:一个长度为n的由数字1,2,3,4 组 ...

  4. phpcms调用一级栏目和二级栏目

    {loop subcat(,,,$siteid) $r}  {php $num++} <strong><a href=} <br /> {elseif $n!=$c} | ...

  5. python生成RSS(PyRSS2Gen)

    既然能够用python解析rss,那么也顺带研究下生成rss. 其实很简单,只是生成一个比较特殊点的xml文档而已. 这里我使用了PyRss2Gen,用法很简单,看代码就知道了,如下: import ...

  6. STUN和TURN技术浅析

    转自:http://blog.csdn.net/yu_xiang/article/details/9227023 在现实Internet网络环境中,大多数计算机主机都位于防火墙或NAT之后,只有少部分 ...

  7. linux SecureCRT ssh key认证登陆

    转自:http://blog.chinaunix.net/uid-20639775-id-3207171.html 通过SecureCRT创建key登录认证 一.生成公钥/密钥对 使用SecureCR ...

  8. LoadRunner 接口测试

    Action1() { int i; lr_rendezvous("rend"); lr_start_transaction("get"); ;i<;i+ ...

  9. Spring官网改版后下载

    Spring官网改版后找了好久都没有找到直接下载Jar包的链接,下面汇总些网上提供的方法,亲测可用. 1.直接输入地址,改相应版本即可:http://repo.springsource.org/lib ...

  10. 定时备份mysql

    @echo offset filename=%date:~0,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%%time:~6,2%mysqldump -- ...