服务器webpack构建性能,[译] 优化 WEBPACK 以更快地构建 REACT
如果您的 Webpack 构建缓慢且有大量的库 —— 别担心,有一种方法可以提高增量构建的速度!Webpack 的 DLLPlugin 允许您将所有的依赖项构建到一个文件中。这是一个取代分块的很好选择。该文件稍后将由您的主 Webpack 配置,甚至可以在共享同一组依赖项的其他项目上使用。典型的 React 应用程序可能包含几十个供应商库,这取决于您的 Flux、插件、路由和其他工具(如 lodash)。我们将通过允许 Webpack 跳过 DLL 中包含的任何引用来节省宝贵的构建时间。
本文假设您已经熟悉典型的 Webpack 和 React 设置。如果没有,请查看 SurviveJS 在 Webpack 和 React 方面的优秀内容,当您的构建时间逐步增加时,请回到本文。
第 1 步,列出您的供应商
构建和维护 DLL 的最简单的方法是在您的项目中创建一个 JS 文件 —— vendors.js,其中引入您使用的所有库。例如,在我们最近的项目中,我们的 vendors.js 文件内容如下:
require("classnames");
require("dom-css");
require("lodash");
require("react");
require("react-addons-update");
require("react-addons-pure-render-mixin");
require("react-dom");
require("react-redux");
require("react-router");
require("redux");
require("redux-saga");
require("redux-simple-router");
require("redux-storage");
require("redux-undo");
这是我们将要“构建”的 DLL 文件,它没有任何功能,只是导入我们使用的库。
注意: 您也可以在这里使用 ES6 风格的 import,但是我们需要用 Bable 来构建 DLL。您仍然可以像您习惯的那样,在您的主项目中使用 import 和其他所有 ES2015 语法糖。
第 2 步,构建 DLL
现在我们可以创建一个 Webpack 配置来构建 DLL。这将从您的应用程序主 Webpack 配置中完全分离,并且会影响部分文件。它不会被您的 Webpack 中间件、Webpack 服务器或其他任何东西调用(手动或通过预构建除外)。
我们称之为 webpack.dll.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: {
vendor: [path.join(__dirname, "client", "vendors.js")]
},
output: {
path: path.join(__dirname, "dist", "dll"),
filename: "dll.[name].js",
library: "[name]"
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, "dll", "[name]-manifest.json"),
name: "[name]",
context: path.resolve(__dirname, "client")
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin()
],
resolve: {
root: path.resolve(__dirname, "client"),
modulesDirectories: ["node_modules"]
}
};
这是典型的 Webpack 配置,除了 webpack.DLLPlugin 以外,它包含 name、context 和 mainifest 路径。mainifest 非常重要,它为其他 Webpack 配置提供了您到已经构建模块的映射。context 是客户端源码的根,而 name 是入口的名称,在本例中是“供应商”。继续尝试使用命令 webpack --config=webpack.dll.js 运行这个构建。最后,您应该得到一个包含模块的排列映射 —— dll\vendor-manifest.json 已经包含了您所有供应商库的精简包 —— dist\dll\dll.vendor.js。
第 3 步,构建项目
**注意:**下述示例不包含 sass、assets、或热加载程序。如果您已经在配置中使用了,它们仍然可以正常工作。
现在我们需要做的就是添加 DLLReferencePlugin,并将其指向我们已经构建的 DLL。您的 webpack.dev.js 可能是如下模样:
var path = require("path");
var webpack = require("webpack");
module.exports = {
cache: true,
devtool: "eval", //or cheap-module-eval-source-map
entry: {
app: path.join(__dirname, "client", "index.js")
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].js",
chunkFilename: "[name].js"
},
plugins: [
//Typically you'd have plenty of other plugins here as well
new webpack.DllReferencePlugin({
context: path.join(__dirname, "client"),
manifest: require("./dll/vendor-manifest.json")
}),
],
module: {
loaders: [
{
test: /\.jsx?$/,
loader: "babel",
include: [
path.join(__dirname, "client") //important for performance!
],
query: {
cacheDirectory: true, //important for performance
plugins: ["transform-regenerator"],
presets: ["react", "es2015", "stage-0"]
}
}
]
},
resolve: {
extensions: ["", ".js", ".jsx"],
root: path.resolve(__dirname, "client"),
modulesDirectories: ["node_modules"]
}
};
我们还做了一些其他事来提高性能,包括:
确保我们有 cache: true
确保 Babel 在查询中加载程序有 cacheDirectory:true
在 bable loader 中使用 include(您应该在所有的 loader 中这样做)
将 devTool 设置为 eval,因为我们正在为构建时间优化 #nobugs
第 4 步,包含 DLL
此时,您已经生成了一个供应商 DLL 文件,并且您的 Webpack 构建并生成 app.js 文件。您需要在模版中提供并包含这两个文件,但 DLL 应该是第一位的。您可能已经使用 HtmlWebpackPlugin 设置了模版。因为我们不关心热重载 DLL,所以除了在主 app.js 之前包含 之外,您实际上不需要做任何事。如果您使用的是 webpack-middleware 或者您自己定制化的服务器,则还需要确保为 DLL 提供服务。此时,一切都应该按原样运行,但是使用 Webpack 进行增量构建的速度应该非常快。
第 5 步,构建脚本
我们可以使用 NPM 和 package.json 添加一些为我们构建的简单脚本。要清除 dist 文件夹,请继续运行 npm i rimraf --saveDev。现在可以添加到您的 package.json 中了:
"scripts": {
"clean": "rimraf dist",
"build:webpack": "webpack --config config.prod.js",
"build:dll": "webpack --config config.dll.js",
"build": "npm run clean && npm run build:dll && npm run build:webpack",
"watch": "npm run build:dll && webpack --config config.dev.js --watch --progress"
}
现在您可以运行 npm run watch。如果您喜欢手动运行 build:dll,则可以将其从监视脚本中删除,以便更快地启动。
就这样,伙计们!
我希望这能让您深入了解 InVision 如何使用 Webpack 的 DLLPlugin 来提高构建速度。如果您有任何问题或想法,欢迎发表评论。
掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏
Gradle更小、更快构建APP的奇淫技巧
本文已获得原作者授权同意,翻译以及转载原文链接:Build your Android app Faster and Smaller than ever作者:Jirawatee译文链接:Gradle更小 ...
CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
优化Webpack构建性能的几点建议
Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位.在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程 ...
Quick UDP Internet Connections 让互联网更快的协议,QUIC在腾讯的实践及性能优化
https://mp.weixin.qq.com/s/44ysXnVBUq_nJByMyX9n5A 让互联网更快:通往QUIC之路 原创: 史天 翻译 云技术实践 8月15日 QUIC(Quick U ...
让DB2跑得更快——DB2内部解析与性能优化
让DB2跑得更快——DB2内部解析与性能优化 (DB2数据库领域的精彩强音,DB2技巧精髓的热心分享,资深数据库专家牛新庄.干毅民.成孜论.唐志刚联袂推荐!) 洪烨著 2013年10月出版 定价:7 ...
《Java程序性能优化:让你的Java程序更快、更稳定》
Java程序性能优化:让你的Java程序更快.更稳定, 卓越网更便宜,不错的书吧
优化webpack构建时间的小技巧
在之前工作的地方,我们一直使用webpck去构建.但是,经过长达四年的更新迭代,每个人都在同一个项目中做了不同的操作和更新,这导致我们生产构建时间达到了惊人的一分半,watch模式的rebuild也达 ...
【译】更快的方式实现PHP数组去重
原文:Faster Alternative to PHP’s Array Unique Function 概述 使用PHP的array_unique()函数允许你传递一个数组,然后移除重复的值,返回一 ...
让Python代码更快运行的 5 种方法
不论什么语言,我们都需要注意性能优化问题,提高执行效率.选择了脚本语言就要忍受其速度,这句话在某种程度上说明了Python作为脚本语言的不足之处,那就是执行效率和性能不够亮.尽管Python从未如C和 ...
随机推荐
东软HIS切换输入法卡死的解决方法
在文字选项的第二页上,勾选上边的相容性设定,然后重启电脑:
巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)
本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...
创建数据库和表的SQL语句【转】
创建数据库和表的SQL语句 转至http://www.cnblogs.com/philanthr/archive/2011/08/09/2132398.html 创建数据库的SQL语句: 1 crea ...
effective c++(07)之为多态基类声明virtual析构函数
class TimeKeeper { public: TimeKeeper() ; ~TimeKepper() ; ... } ; class AtomicClock:public TimeKeepe ...
mac版gif格式录屏工具下载和使用
下载链接: http://pan.baidu.com/s/1geeRmtd 密码: rstv ps:如果失效可以联系发邮件至chenruichn@163.com联系我 [以下教程为转载]本帖最后由 S ...
[dp] hdu 4472 Count
意甲冠军: 鉴于n节点,满足子节点的相同的树节点号的同一层较少不同的形式. 思考: dp[i][j] 代表i节点.最后,一个层j方法节点 由于满足同层节点,所以j一层又一层必须是j 整数倍 所以就能得 ...
c++错误
run-time check failure #2-stack around the variable 'c' was corrupted错误产生的原因大多是因为程序定义了数组,存在数组越界.解决办法 ...
Linux系统安装管理
将lfs linux liveCD的内容copy安装到硬盘 先将98.ima(dos启动软盘镜像文件)用ultraISO写入到u盘(usbhdd+), 不必勾选“创建启动分区”. 将liveCD和内核 ...
poj1976
dp #include #include #include using namespace std; ...
strings.xml显示html格式
需求:合同协议,其中指定内容为红色 效果图: 实现如下:
服务器webpack构建性能,[译] 优化 WEBPACK 以更快地构建 REACT相关推荐
- .NET Core 2.1 Preview 1发布:更快的构建性能
今天,我们宣布发布 .NET Core 2.1 Preview 1.这是 .NET Core 2.1 的第一个公开发布.我们有很大的改进希望分享出来,并且渴望得到您的反馈意见,无论是在评论中还是在gi ...
- ic卡写卡 angus_使用Angus更快地构建Web应用程序
ic卡写卡 angus Nick's outstanding utility, Angus, has changed! Click here to read an updated post! 尼克杰出 ...
- 即将取代Maven和Gradle的新一代更强更快的构建工具(至尊典藏版)
目录 前言 1.介绍 2.安装 3.使用 3.1. 从GitHub下载压缩包 3.2. 解压并配置环境变量 3.3.测试 4.总结 前言 大家好,我是程序缘--幻羽,我又来了!! Maven和Grad ...
- 性能优化:如何更快地接收数据
从网卡到应用程序,数据包会经过一系列组件,其中驱动做了什么?内核做了什么?为了优化,我们又能做些什么?整个过程中涉及到诸多细微可调的软硬件参数,并且相互影响,不存在一劳永逸的"银弹" ...
- 更好的Java虚拟机Zing: 更好的性能,无停顿,更快的启动
Zing虚拟机文档Understanding Java Garbage Collection(了解Java垃圾收集) 首先说明这个Zing是收费的,但是他也是优秀的,我觉得我们可以研究下他的一些思想对 ...
- msbuild构建步骤_使用并行构建和多核CPU的MSBuild进行更快的构建
msbuild构建步骤 UPDATE: I've written an UPDATE on how to get MSBuild building using multiple cores from ...
- 使用BaaS更快地构建Xamarin应用程序
目录 问题 什么是MVP? 解决方案 创建RESTful后端 抓取您的帐户名称 抓取您的API密钥 创建一个新项目 获取Android模拟器设置 添加MeshyDB SDK 建立连接 配置客户端 注册 ...
- 如何更快地渲染?深入了解3D渲染性能的指南!(2)
如何更快地渲染-概述: 我将把本文分为两个主要部分: 可以优化的内部渲染因子 可以优化的外部渲染因子 您会发现内部渲染因子与您想要更快地优化/渲染的场景紧密相关,需要更改场景元素和渲染设置. 另一方面 ...
- webpack中文网(六)迁移到新版本、使用环境变量、构建性能
webpack中文网(六)迁移到新版本.使用环境变量.构建性能 文章目录 webpack中文网(六)迁移到新版本.使用环境变量.构建性能 1. 迁移到新版本 `resolve.root`, `reso ...
最新文章
- SaaS加速器II 能力中心:互利互补 共享商业红利
- 解决小米手机无法收到开机广播的问题
- 每日一皮:年轻时的你,是不是也各种重构欲望?
- 全球 PC 应用程序有半数已过期未更新
- linux neo4j 服务器,如何在linux服务器上配置Neo4j · Digital World
- think php 缩放图片,THINKPHP+JS实现缩放图片式截图的实现
- SQL Server的复合索引学习【转载】
- Unix Shell 通配符、转义字符、元字符、特殊字符
- linux wkhtmltopdf换字体,ubuntu – 更新后Wkhtmltopdf字体大小增加
- centos 分区
- 34 个免费学习编程的最佳网站
- 麦咭萌app送智伴机器人_国内儿童陪伴机器人品牌盘点
- word转简洁html工具,Convert Word to HTML(Word转HTML工具)
- ir2110s驱动工作原理
- 从整理看视觉设计(网易云课堂我的学习中心-微专业视觉优化)
- 【神经网络】一文带你轻松解析神经网络(附实例恶搞女友)
- ​李宏毅机器学习——领域适应Domain Adaptation
- 网络协议-TCP和UDP最完整的区别介绍
- 【系统收藏——中天证券创鑫软件 官方版 [同时支持三板、港股行情、沪深300指数。]】
- mysql server has fone away
热门文章
- 修改10g RAC public or private or virtual IP [Oracle]
- 服务器消息不是按顺序来的,消息队列之 RocketMQ(示例代码)
- unity android 原生,unity创建Android原生插件
- Git 标签(tag)相关操作
- EhCache缓存在web下的使用实例
- Android Gradle插件(plugin)版本(version)与Gradle、SDK Build Tools版本关系
- windows内置的linux安卓驱动多系统摆脱虚拟机(下)
- 钉钉日志范文100篇_钉钉的日志模板怎么修改 钉钉日志模板修改教程
- Dijkstra求最短路 II
- Date-calendar 类