webpack使用优化(基本篇)
转自:https://github.com/lcxfs1991/blog/issues/2
前言
本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos。
为什么要使用Webpack
- 与react一类模块化开发的框架搭配着用比较好。
- 属于配置型的构建工具,比较用容易上手,160行代码可大致实现gulp400行才能实现的功能。
- webpack使用内存来对构建内容进行缓存,构建过程中会比较快。
第3点我想稍微论述一下,如果看过我之前写的《如何写一个webpack插件(一)》,会发现,webpack会将文件内容存在compilation这个大的object里面,方便各种插件,loader间的调用。虽然gulp也用到了流(pipe)这样的内存处理方式,但感觉webpack更进一步。gulp是每一个任务(task)用一个流,而webpack是共享一个流。
简要回顾Webpack的配置
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,合图除外)。下面让我来介绍一下在使用过程中的一些优化点。
优化点一.如何区分开发及生产环境
- 在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"
}
- 在webpack.config.js使用process.env.NODE_ENV进行判断
优化点二.使用代码热替换
使用代码热替换在开发的时候无需刷新页面即可看到更新,而且,它将构建的内容放入内在中,能够获得更快的构建编译性能,因此是官方非常推荐的一种构建方式。
方法一:
1.将代码内联到入口js文件里
2.启动代码热替换的plugins
方法二:
直接实现一个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上配置。这个办法最简单,当然灵活性没有自己实现一个服务器好。
优化点三.import react导致文件变大,编译速度变慢,乍办?
- 如果你想将react分离,不打包到一起,可以使用externals。然后用
<script>
单独将react引入
- 如果不介意将react打包到一起,请在alias中直接指向react的文件。可以提高webpack搜索的速度。准备部署上线时记得将换成react.min,能减少文件大小(减少约600kb)
- 使用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可以省下不少搜索硬盘的时间。
优化点七. 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怎么办
- 使用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速度慢乍办
上图是初始化构建30个文件的用时,一共用了13
秒。用了externals优化后,还有100多kb,比用纯webpack优化要大50多kb。而且,由于你用的是gulp-webpack,每次有文件改动,都必须全部重新编译一次。因此,跟react搭配建议还是不要用gulp-webpack。因为如果你使用webpack的话,即使初次启动时速度也并不快,但开发过程中,webpack会自动识别,只会重新编译有修改的文件,这大大加快了编译构建速度。
没办法,老项目改造,真的要用,乍办?我提供以下思路
(1)当非js文件改变的时候,不要去跑js打包的任务
(2)非公共的js发生改变的时候,只执行这个js的打包任务
下图是优化了之后,在开发过程中非公共文件修改后的编译速度。我的娘,纯webpack只需要100多200ms。建议还是用webpack吧。
优化点十一.如果在通过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
webpack使用优化(基本篇)相关推荐
- 带你深度解锁Webpack系列(优化篇)
带你深度解锁Webpack系列(优化篇) 本文罗列出了十多种优化方式,大家可以结合自己的项目,选择适当的方式进行优化.这些 Webpack 插件的源码我大多也没有看过,主要是结合 Webpack 官方 ...
- vuejs项目性能优化 - 总结篇
首页等页面加载慢?打包编译后css/js文件过大?试试压缩.路由懒加载等技术 打包编译后,过大的文件如:app.css.app.js.vendor.js 本着 "开发环境".&qu ...
- webpack大全---------(基础配置篇)----4.webpack实例三
上一篇:webpack大全---------(基础配置篇)----2.webpack实例二 webpack实例三:讲述代码效验模块eslint.引入第三方模块的处理.图片的打包处理. 第一步:安装配置 ...
- webpack打包优化_前端性能优化:webpack性能调优与Gzip原理
链接:https://juejin.im/book/5b936540f265da0a9624b04b 从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程: DNS 解析 TCP 连 ...
- js文件引用 webpack_想了解Webpack,看这篇就够了
摘要:Webpack是一种前端资源构建工具,一个静态模块打包器. 1. 摘要 Webpack是一种前端资源构建工具,一个静态模块打包器.在Webpack看来,前端的所有资源文件(js/json/css ...
- webpack打包vue反编译_2020年你必须知道的webpack打包优化方法
本文字数:3534字 预计阅读时间:10分钟 随着我们的项目项目越做越大,引入的第三方库会越来越多,打包的依赖也越来越多,每次 build 的时间越来越长,打包出来的文件会越来越大.最糟糕的是单页面应 ...
- JavaScript优化基本篇
本文章适合于与作者一样想要学习JavaScript的的"非前台专业"的大学生或者后台工程师. 如果,你想进行进一步的优化,那么请点击JavaScript性能优化小知识点总结 个人笔 ...
- linux性能优化--cpu篇
linux性能优化--cpu篇 前言 负载 CPU使用率 proc perf 一些链接 `perf list` 比较有用的event `perf stat` `perf record` Profili ...
- (六)构建优化(揭开webpack性能优化的内幕)
构建优化 webpack的优化配置[了解这些优化配置才敢说会用webpack] Tree-shaking JS压缩 作用域提升 Babel的优化配置 webpack的依赖优化 noParse(不解析) ...
- ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL
ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL 引言--- 在现今搜索引擎制霸天下的时代,我们不得不做一些东西来讨好爬虫,进而提示网站的排名来博得一个看得过去的流 ...
最新文章
- CVPR 2020 | 基于多智能体RL实现多轮连续交互,IteR-MRL使图像分割算法达到医用标准...
- jenkins如何实现重新发布历史构建记录里的版本
- python读文件操作-python文件操作-读写删除复制总结
- 谁在关心toString的性能?
- 【Python】【Flask】
- php程序怎么调试,你是怎么调试PHP代码的
- C语言控制台窗口图形界面编程(五).
- ob_get_contents()函数的用法
- 异步执行线程的两种方法
- android.graphics.Color 包含颜色值
- 利用gensim在simulink中建立神经网络模型
- cookie怎样存储数据?
- 计算机专业祝福新年快乐,用计算机语言祝福大家新年快乐!
- 类垂直站点插件实现与分享
- oracle 怎么写报表,Oracle reports提供的六种风格报表格式
- IDEA改变背景颜色(护眼色)
- php 正则不贪婪,正则表达式之 贪婪与非贪婪模式详解(概述)
- i3cpu驱动xp_Intel英特尔 Core i3/Core i5/Core i7系列CPU显示驱动 14.46.9.5394版 For XP-64
- 在经历了6个月的学习后,我终于上架了自己的第一款APP---酷课堂iOS群问答精华整理(201807期)
- 全球及中国同步相量测量装置行业研究及十四五规划分析报告(2022)
热门文章
- 【51nod - 1076】2条不相交的路径(Tarjan无向图判环)
- 【POJ - 3347 】Kadj Squares (计算几何,思维 或 扫描线)
- NYOJ-14 会场安排问题(经典贪心,区间完全不覆盖模板)
- qt同时连接oracle和mysql_QT连接Oracle和Mysql的详细步骤,已成功~!
- 会计专业领域计算机应用系统,信息技术在会计专业领域中的应用
- 恐怖黎明稳定服务器,恐怖黎明新人联机图文教程 怎么联机-游侠网
- esp32 micropython spiffs_spiffs 文件系统在esp32中的应用
- c语言int32u的作用,求c语言大神 帮我解释一下这段说的都是啥?
- 使用三种方式创建Class字节码类文件对象
- IO流配置文件,键值对Properties 的读取