webpack使用优化（基本篇）

转自：https://github.com/lcxfs1991/blog/issues/2

前言

本文不是webpack入门文章，如果对webpack还不了解，请前往题叶的Webpack入门，或者阮老师的Webpack-Demos。

为什么要使用Webpack

  1. 与react一类模块化开发的框架搭配着用比较好。
  2. 属于配置型的构建工具，比较用容易上手，160行代码可大致实现gulp400行才能实现的功能。
  3. webpack使用内存来对构建内容进行缓存，构建过程中会比较快。

第3点我想稍微论述一下，如果看过我之前写的《如何写一个webpack插件（一）》，会发现，webpack会将文件内容存在compilation这个大的object里面，方便各种插件，loader间的调用。虽然gulp也用到了流(pipe)这样的内存处理方式，但感觉webpack更进一步。gulp是每一个任务(task)用一个流，而webpack是共享一个流。

简要回顾Webpack的配置

webpack_config

Webpack的配置主要为了这几大项目：

  • entry：js入口源文件
  • output：生成文件
  • module：进行字符串的处理
  • resolve：文件路径的指向
  • plugins：插件，比loader更强大，能使用更多webpack的api

常用Loaders介绍

  • 处理样式，转成css，如：less-loader, sass-loader
  • 图片处理，如: url-loader, file-loader。两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中
  • 处理js，将es6或更高级的代码转成es5的代码。如：
    babel-loader，babel-preset-es2015，babel-preset-react
  • 将js模块暴露到全局，如果expose-loader

常用Plugins介绍

  • 代码热替换, HotModuleReplacementPlugin
  • 生成html文件，HtmlWebpackPlugin
  • 将css成生文件，而非内联，ExtractTextPlugin
  • 报错但不退出webpack进程，NoErrorsPlugin
  • 代码丑化，UglifyJsPlugin，开发过程中不建议打开
  • 多个 html共用一个js文件(chunk)，可用CommonsChunkPlugin
  • 清理文件夹，Clean
  • 调用模块的别名ProvidePlugin，例如想在js中用$，如果通过webpack加载，需要将$与jQuery对应起来

使用优化

了解了以上介绍的Loaders和Plugins之后，基本就可以搭建一整套基于Webpack的构建（不需要gulp与grunt，合图除外）。下面让我来介绍一下在使用过程中的一些优化点。

优化点一.如何区分开发及生产环境

  1. 在package.json里面的script设置环境变量，注意mac与windows的设置方式不一样
"scripts": {"publish-mac": "export NODE_ENV=prod&&webpack -p --progress --colors","publish-win":  "set NODE_ENV=prod&&webpack -p --progress --colors"
}
  1. 在webpack.config.js使用process.env.NODE_ENV进行判断

优化点二.使用代码热替换

使用代码热替换在开发的时候无需刷新页面即可看到更新，而且，它将构建的内容放入内在中，能够获得更快的构建编译性能，因此是官方非常推荐的一种构建方式。

方法一：

1.将代码内联到入口js文件里
w1

2.启动代码热替换的plugins
w2

方法二：

直接实现一个server.js，启动服务器（需要启动热替换plugin)，下面是我在业务中用到的一个范例。具体的一些参数可以

var webpack = require('webpack');
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config.js");config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000");  // 将执替换js内联进去
config.entry.index.unshift("webpack/hot/only-dev-server");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {hot: true,historyApiFallback: false,// noInfo: true,stats: { colors: true  // 用颜色标识},proxy: {"*": "http://localhost:9000" // 用于转发api数据，但webpack自己提供的并不太好用},
});
server.listen(9000);

方法三：

直接在webpack.config.js上配置。这个办法最简单，当然灵活性没有自己实现一个服务器好。
w3

优化点三.import react导致文件变大，编译速度变慢，乍办?

  1. 如果你想将react分离，不打包到一起，可以使用externals。然后用<script>单独将react引入
    w1
  2. 如果不介意将react打包到一起，请在alias中直接指向react的文件。可以提高webpack搜索的速度。准备部署上线时记得将换成react.min，能减少文件大小(减少约600kb)
    w2
  3. 使用module.noParse针对单独的react.min.js这类没有依赖的模块，速度会更快。

优化点四.将模块暴露到全局

如果想将report数据上报组件放到全局，有两种办法：

方法一：

在loader里使expose将report暴露到全局，然后就可以直接使用report进行上报

{test: path.join(config.path.src, '/js/common/report'),loader: 'expose?report'
},

方法二：

如果想用R直接代表report，除了要用expose loader之外，还需要用ProvidePlugin帮助，指向report，这样在代码中直接用R.tdw， R.monitor这样就可以

new webpack.ProvidePlugin({"R": "report",
}),

优化点五. 合并公共代码

有些类库如utils, bootstrap之类的可能被多个页面共享，最好是可以合并成一个js，而非每个js单独去引用。这样能够节省一些空间。这时我们可以用到CommonsChunkPlugin，我们指定好生成文件的名字，以及想抽取哪些入口js文件的公共代码，webpack就会自动帮我们合并好。

new webpack.optimize.CommonsChunkPlugin({name: "common",filename: "js/common.js",chunks: ['index', 'detail]}),

优化点六. 善用alias。

resolve里面有一个alias的配置项目，能够让开发者指定一些模块的引用路径。对一些经常要被import或者require的库，如react,我们最好可以直接指定它们的位置，这样webpack可以省下不少搜索硬盘的时间。
w6

优化点七. alias的索引路径。

有时候你的node_modules包可能会放在上层父文件夹中，这时你可以使用resolve.moduledirectories来扩张你的索引路径，例如我们给redux做一个alias：

 resolve: {moduledirectories:['node_modules', config.path.src],extensions: [".js", ".jsx",],alias: {'redux': 'redux/dist/redux',}},

这样的话，它的索引路径会如下：

/a/b/node_module/redux/dist/redux
/a/node_module/redux/dist/redux
/node_module/redux/dist/redux

要注意的是多加索引路径可能会导致性能下降，所以除非项目复杂，否则慎用这个功能。

优化点八.多个html怎么办

  1. 使用HtmlWebpackPlugin，有多少个html，就排列多少个，记得不要用inject，否则全部js都会注入到html。如果真的要用inject模式，请务必将不需要的js用exclude chunk去掉或者用chunk参数填上你需要入口文件。

仅使用app作为注入的文件：

plugins: [new HtmlWebpackPlugin({chunks: ['app']})
]

不使用dev-helper作为注入文件：

plugins: [new HtmlWebpackPlugin({excludeChunks: ['dev-helper']})
]

如果你不想用inject模式，但又想使用html-webpack-plugin，那你需要在html里用<script>标签放入对应的js，以及用入对应的css。记住，这些资源的路径是在生成目录下的，写路径的时候请写生成目录下的相对路径。

优化点九. html-webpack-plugin不用使inject模式没又md5，而且不支持文件内联怎么破？

当时我就给维护者提了一个issue--Add inline feature to the plugin。

然后维护者在开发的分支上加了这么一个特性（证明维护者不想在插件里加内联功能了，想让我来弄）：

事件
允许其它插件去使用执行事件
html-webpack-plugin-before-html-processing
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit

使用办法：

  compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {htmlPluginData.html += 'The magic footer';callback();});

不过我还是决定自己开发一个了一个插件
html-res-webpack-plugin，有中英文文档可以参考。其实html-webpack-plugin以js作为入口可能跟webpack的理念更为一致，但其实直接在html上放link和script更加方便直白一些。而且html-webpack-plugin局限性太多，如果我想在script上加attribute也是比较麻烦的事儿。所以我干脆开发一个可以允许在html上直接放link和script而且支持内联及md5的插件。

但相信我之后也会针对html-webpack-plugin再写一个内联及md5的插件，适配一直在用这个插件的人。

优化点十.用gulp-webpack速度慢乍办

w3

上图是初始化构建30个文件的用时，一共用了13秒。用了externals优化后，还有100多kb，比用纯webpack优化要大50多kb。而且，由于你用的是gulp-webpack，每次有文件改动，都必须全部重新编译一次。因此，跟react搭配建议还是不要用gulp-webpack。因为如果你使用webpack的话，即使初次启动时速度也并不快，但开发过程中，webpack会自动识别，只会重新编译有修改的文件，这大大加快了编译构建速度。

没办法，老项目改造，真的要用，乍办？我提供以下思路
（1）当非js文件改变的时候，不要去跑js打包的任务
（2）非公共的js发生改变的时候，只执行这个js的打包任务

w4

下图是优化了之后，在开发过程中非公共文件修改后的编译速度。我的娘，纯webpack只需要100多200ms。建议还是用webpack吧。
w5

优化点十一.如果在通过webpack在项目中使用bootstrap, jquery以及fontawesome

这一点对于创业公司来说可能比较有用，它们的初期产品都需要快速上线，用一些比较成熟的UI框架会比较好。

这样，首先我们需要jquery文件，并且安装bootstrap(3.3.5) ,font-awesome(4.4.0),以及imports-loader(0.6.3)。还需要sass-loader(3.1.2)及less-loader(2.5.3)。

然后，在主要入口文件要这么引用下面的样式文件：

require('bootstrap/less/bootstrap.less');
require('font-awesome/scss/font-awesome.scss');
require('./index.scss');

在webpack.config.js的entry项目里，可以加上这个vendor:

common: ['jquery', 'bootstrap'],

在loaders里加入以下loader，将jQuery暴露到全局:

{test: path.join(config.path.src, '/libs/jq/jquery-2.1.4.min'),loader: 'expose?jQuery'
},

再添加以下loader，让webpack帮助复制font文件

{ test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,  loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]' 
},

在plugins里添加ProvidePlugin，让$指向jQuery

new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery"
}),

这样，就可以同时使用jQuery, Bootstrap和Fontawesome了。

webpack会取代gulp吗

  • 未必，但在开发环境，以及不需要一些功能如合图的情况下，webpack可以完全取代gulp，至少现在我有三个项目完全用webpack进行开发和部署上线
  • 要取代gulp,还需要不断发展它的loader以及plugin生态，至少，完善一下开发者文档啊。

转载于:https://www.cnblogs.com/laneyfu/p/6252307.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/456575.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

word2vec中单词向词向量的转换过程详解

word2vec中单词向词向量的转换过程详解

目录前言&#xff1a;1、Word2Vec两种模型的大致印象2、CBOW模型流程举例3、CBOW模型流程举例总结&#xff1a; 目录 前言&#xff1a; 针对word2vec是如何得到词向量的&#xff1f;这篇文章肯定能解决你的疑惑。该篇文章主要参考知乎某大神的回答&#xff0c;个人在此基础上…
阅读更多...
JavaScript学习笔记(四)——jQuery插件开发与发布

JavaScript学习笔记(四)——jQuery插件开发与发布

jQuery插件就是以jQuery库为基础衍生出来的库&#xff0c;jQuery插件的好处是封装功能&#xff0c;提高了代码的复用性&#xff0c;加快了开发速度&#xff0c;现在网络上开源的jQuery插件非常多&#xff0c;随着版本的不停迭代越来越稳定好用&#xff0c;在jQuery官网有许多插…
阅读更多...
《树莓派学习指南（基于Linux）》——1.4　将Raspbian烧录到SD卡

《树莓派学习指南（基于Linux）》——1.4　将Raspbian烧录到SD卡

本节书摘来异步社区《树莓派学习指南&#xff08;基于Linux&#xff09;》一书中的第1章&#xff0c;第1.4节&#xff0c;作者&#xff1a;【英】Peter Membrey ,【澳】David Hows &#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看 1.4　将Raspbian烧录到SD卡 …
阅读更多...
python单向链表和双向链表的图示代码说明

python单向链表和双向链表的图示代码说明

图示说明&#xff1a; 单向链表&#xff1a; insert、 remove、 update、pop方法 class Node:def __init__(self, data):self.data dataself.next Nonedef __str__(self):return str(self.data)# 通过单链表构建一个list的结构&#xff1a; 添加 删除 插入 查找 获取长…
阅读更多...
AIML知识库数据匹配原理解析

AIML知识库数据匹配原理解析

目录&#xff1a;前言&#xff1a;1、AIML系统工作流程2、AIML的核心推理机制3、推理举例4、匹配规则及实践中遇到的一些问题的解释总结&#xff1a; 目录&#xff1a; 前言&#xff1a; 参考&#xff1a;《Alice机理分析与应用研究》 关于AIML库这里就不介绍了&#xff0c…
阅读更多...
【Python】模拟面试技术面试题答

【Python】模拟面试技术面试题答

一、 python语法 1. 请说一下你对迭代器和生成器的区别&#xff1f; 2. 什么是线程安全&#xff1f; 3. 你所遵循的代码规范是什么&#xff1f;请举例说明其要求&#xff1f; 4. Python中怎么简单的实现列表去重&#xff1f; 5. python 中 yield 的用法…
阅读更多...
Win7 U盘安装Ubuntu16.04 双系统

Win7 U盘安装Ubuntu16.04 双系统

Win7系统下安装Ubuntu系统&#xff0c;主要分为三步&#xff1a; 第1步&#xff1a;制作U盘启动盘 第2步&#xff1a;安装Ubuntu系统 第3步&#xff1a;创建启动系统引导 第1步&#xff1a;制作U盘启动盘 1.下载Ubuntu16.04安装镜像&#xff0c;官网地址&#xff1a;http://www…
阅读更多...
Word2VecDoc2Vec总结

Word2VecDoc2Vec总结

转自&#xff1a;http://www.cnblogs.com/maybe2030/p/5427148.html 目录&#xff1a;1、词向量2、Distributed representation词向量表示3、word2vec算法思想4、doc2vec算法思想5、Doc2Vec主要参数详解总结&#xff1a; 目录&#xff1a; 1、词向量 自然语言理解的问题要转…
阅读更多...
《游戏视频主播手册》——2.2 哪些人适合做游戏主播

《游戏视频主播手册》——2.2 哪些人适合做游戏主播

本节书摘来自异步社区《游戏视频主播手册》一书中的第2章&#xff0c;第2.2节&#xff0c;作者 王岩&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.2 哪些人适合做游戏主播 据不完全统计&#xff0c;目前国内有超过26000名活跃的游戏主播。所谓“活跃的…
阅读更多...
干货分享！DevExpressv16.2最新版演示示例等你来收！（上）

干货分享！DevExpressv16.2最新版演示示例等你来收！（上）

2019独角兽企业重金招聘Python工程师标准>>> 为解决大家找资源难的问题&#xff0c;EVGET联合DevExpress控件中文网盘点热门的DevExpress资讯、Demo示例、版本升级及下载&#xff0c;以及各种教程推荐等。更多下载及资讯也可以在DevExpress控件中文网中找到&#xf…
阅读更多...
一文看懂哈夫曼树与哈夫曼编码

一文看懂哈夫曼树与哈夫曼编码

转自&#xff1a;http://www.cnblogs.com/Jezze/archive/2011/12/23/2299884.html 在一般的数据结构的书中&#xff0c;树的那章后面&#xff0c;著者一般都会介绍一下哈夫曼(HUFFMAN)树和哈夫曼编码。哈夫曼编码是哈夫曼树的一个应用。哈夫曼编码应用广泛&#xff0c;如JPEG中…
阅读更多...
解决：未能将管道连接到虚拟机: 所有的管道范例都在使用中。

解决：未能将管道连接到虚拟机: 所有的管道范例都在使用中。

虚拟机无端出现: VMware Workstation 无法连接到虚拟机。请确保您有权限运行该程序、访问改程序使用的所有目录以及访问所有临时文件目录。未能将管道连接到虚拟机: 所有的管道范例都在使用中。 原因&#xff1a;Ubuntu开机慢到开不开&#xff0c;我就在任务管理器强制结束了…
阅读更多...
CCF推荐各种国际学术会议和期刊目录

CCF推荐各种国际学术会议和期刊目录

这是中国计算机学会推荐国际学术会议和期刊目录2015年版本的内容&#xff0c; 主要罗列了国际上计算机相关的各个方向的顶级学术会议和期刊目录&#xff08;包含A、B、C三个等级&#xff09;。 包含的方向有&#xff1a; 计算机体系结构/并行与分布计算/存储系统计算机网络网络…
阅读更多...
第四次作业类测试代码+036+吴心怡

第四次作业类测试代码+036+吴心怡

一、类图 二、代码 package application; public class Commission { /* * hp&#xff1a;耳机 80元 mpc&#xff1a;手机壳 10元 cpsp&#xff1a;手机贴膜 8元 */ public float calculate(String line) { int hp 0, mpc 0, cpsp 0; String[] input null; float money 0;…
阅读更多...
LSI/LSA算法原理与实践Demo

LSI/LSA算法原理与实践Demo

目录&#xff1a;1、使用场景2、优缺点3、算法原理3.1、传统向量空间模型的缺陷3.2、Latent Semantic Analysis (Latent Semantic Indexing)3.3、算法实例 4、文档相似度的计算5、对应的实践Demo 目录&#xff1a; 1、使用场景 文本挖掘中&#xff0c;主题模型。聚类算法关注…
阅读更多...
Linux学习134 Unit 8

Linux学习134 Unit 8

Unit8 ldap网络帐号1.ldap是什么ldap目录服务认证&#xff0c;和windows活动目录类似&#xff0c;就是记录数据的一种方式2.ldap客户端所须软件yum sssd krb5-workstation -y3.如何开启ldap用户认证authconfig-tui┌────────────────┤ Authentication Configu…
阅读更多...
FastText原理总结

FastText原理总结

目录&#xff1a;1、应用场景2、优缺点3、FastText的原理4、FastText词向量与word2vec对比 目录&#xff1a; 1、应用场景 fastText是一种Facebook AI Research在16年开源的一个文本分类器。 其特点就是fast。相对于其它文本分类模型&#xff0c;如SVM&#xff0c;Logistic …
阅读更多...
解决 :sudo:/etc/sudoers 可被任何人写

解决 :sudo:/etc/sudoers 可被任何人写

问题&#xff1a; sudo:sudo /etc/sudoers is world writable sudo:no valid sudoers sources found ,quitting sudo:unable to initialize policy plugin 解决方案&#xff1a; 方法一: 1.开机按shift或esc进入ubantu高级模式 再进行recovery模式 2.选择root命令行模式 3.…
阅读更多...
Doc2Bow简介与实践Demo

Doc2Bow简介与实践Demo

Doc2Bow是Gensim中封装的一个方法&#xff0c;主要用于实现Bow模型&#xff0c;下面主要介绍下Bow模型。 1、BoW模型原理 Bag-of-words model (BoW model) 最早出现在自然语言处理&#xff08;Natural Language Processing&#xff09;和信息检索&#xff08;Information Ret…
阅读更多...
SPOJ 694/705 后缀数组

SPOJ 694/705 后缀数组

思路&#xff1a; 论文题*n Σn-i-ht[i]1 就是结果 O(n)搞定~ //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> using namespace std; #define N 55555 int cases,n,cntA[N],cntB[N],A[N],B[N],rk[N],sa[N],tsa[N],ht[N]; char…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023