你们真的可以忍受 webpack 要编译 2-5 秒吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1935 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近开发前端，写到中途发现编译速度越来越慢，用的是 vue-cli。后面受不了了，直接用 JQuery 重写了一遍，大家 webpack 一般速度如何

第 1 条附言 · 2019-01-01 19:22:49 +08:00

我觉得 Java 那些很慢完全能够理解，因为他编译成 class 也需要时间。但是 JavaScript 感觉这点就很不好，要调一个 BUG 写几处等 2S，这样算下来效率极低，脑子存储的信息被等待干扰的严重，头疼，parcel 也解决不了这个问题

第 2 条附言 · 2019-01-02 09:19:45 +08:00

备注一下，我是用 JQuery+Vue-cdn 来另外写一个项目的，其实之前这种不带编译的方式写起来快很多，最近突发奇想换成编译的，但是大幅度降低了开发效率。无意黑 Vue，只是对 Webpack 编译速度不太满意

第 3 条附言 · 2019-01-02 11:01:45 +08:00

各位，我不是说 build，是说实时编辑之后 webpack 进行编译(然后去 chrome 那里调界面)。因为脚本我的理解，应该就是免编译即使改即使出来的，但是现在感觉越来越重了，哪怕我改个变量也要等半天，毕竟 js 是动态的，很多东西都是未知的

webpack

编译

vue-cli

jquery

136 条回复 • 2020-04-26 16:45:36 +08:00

1 2

❮

❯

101

ben1024

2019-01-02 10:01:50 +08:00

脚本语言的优势[狗头]

102

xieguanglei

2019-01-02 10:07:36 +08:00

live-reload + 双屏，慢慢想慢慢写，让子弹飞一会儿

103

lihongjie0209

2019-01-02 10:29:12 +08:00

@C90 会飘, 所以单元测试不能超过 1s, 会打断思路

104

nicebird

2019-01-02 10:30:42 +08:00

试下 c++编译几十分钟的恐惧

105

onepunch

2019-01-02 10:36:42 +08:00

我们原来项目要编译几个小时，说出来你都不信 :-(

106

chocotan

2019-01-02 10:49:33 +08:00

我这用 antd，打包要几分钟。。。

107

hugee

2019-01-02 10:57:35 +08:00 via Android

可以

108

cncoffer

2019-01-02 10:59:58 +08:00

我觉得很不错了, C++编译动辄几分钟, 完整编译要半小时, 我都能去玩两把炉石了

109

demonzoo

2019-01-02 11:06:14 +08:00

2-5s 也等不了吗？现在人都这么矫情了啊

110

lukunlin

2019-01-02 11:08:25 +08:00

因为里面要处理的任务是实在是太多了，loader 的依赖系统，es6 的 bable，还有其他打包等，慢是肯定的~
但是你可以根据自己手动去关闭一些服务，建议你可以关闭热更新服务，避免保存一次编译一次。
编译有编译的好处，传统有传统的好处，如果你不能理解其他的道理。那只能是保守，但现在编译模式那么火，必然有它的道理，你一定没悟到其他的道理~

111

hellowes

2019-01-02 11:11:06 +08:00

@demonzoo 程序员追求极致

112

suzic

2019-01-02 11:47:12 +08:00

我敢肯定楼主没用过 Angular

113

bestkayle

2019-01-02 12:30:19 +08:00

@demonzoo #108 因为动态语言写起来 bug 比较多吧，要频繁改动，所以显得很慢。用 PHP 就不会慢了，重新启动都不需要，哈哈。

114

Raisu

2019-01-02 12:34:52 +08:00

搞不懂都用 ES6 但是实际旧一点的浏览器都不兼容。。。。

115

Creabine

2019-01-02 12:55:24 +08:00

@Raisu #114 因为代码是写给人看的，顺便给机器执行

116

wly19960911

2019-01-02 13:00:15 +08:00

@bestkayle #113 问题 PHP 做不到框架做的事情啊，这个问题在于框架和编译工具，而不是语言。就算你 php，php7 之前的编译器也不是很卡吗。现在 php7 才优化上来了。

@Raisu #114 搞不懂为什么大家都用新的系统开发，实际上旧的系统很多问题不兼容。而且浏览器的性能不断推陈出新，新的功能不断增加，es6 本来就是一个内容而已。语言是进化的，而且完全兼容的语法，也没有强迫你写 es6。比起 es6，框架更来得重一点吧。

117

jsq2627

2019-01-02 13:10:12 +08:00

:doge: 大神写代码从来都是一次写完，一次编译直接通过无 bug

118

yiyi11

2019-01-02 14:31:49 +08:00

从 es6 开始，js 也走上编译的路了。本质上，3 大框架是为了应对复杂度更高，可维护性更强的项目而生的，所以按照理论来说，对比 jq，编译时间确实应该更慢才对。目前还没有完美解决方案，又快又高可维护，这相当于侧重点吧，你侧重哪个选哪个。

119

yiyi11

2019-01-02 14:36:11 +08:00

不负责任地说一句，或者上 type script ？这样就名正言顺编译了，而且解决你说的动态问题，减少 debug 次数。

120

exonuclease

2019-01-02 14:54:56 +08:00

你需要 dllplugin

121

realpg

2019-01-02 15:24:32 +08:00

@wly19960911
PHP 编译器？
PHP7 之前很卡？

122

wly19960911

2019-01-02 15:27:48 +08:00

@realpg #121 我说解释器，只是类比而已，这个问题在于编译工具上面而不是语言。只是说当时的层主理解的点不对，有说错可以指正下，抱歉

123

visionsmile

2019-01-02 15:30:54 +08:00

我们项目编译一下都是五分钟起步...

124

cuzfinal

2019-01-02 17:41:15 +08:00

2-5s 我会笑出声

125

duan602728596

2019-01-02 17:55:26 +08:00

算了，还是放一些解决方案吧：

1. webpack 使用 dll 功能
2. 升级到最新版的 webpack
3. babel 升级到 7，babel7 有缓存功能
4. 避免编译 node_modules 里面的代码
5. 减少 webpack 无用的配置
6. 做好代码分割
7. 自己搭建开发环境，不到 100 行代码就能搭建好服务了，完全可以不使用 cli

做的好的话，编译时间甚至会缩短在 1s 以内，不知道简单的东西为何要搞得这么复杂

126

beginor

2019-01-02 18:26:37 +08:00 via Android

ionic 4 可是 10 秒起步，😄

127

pxlxh

2019-01-02 19:53:06 +08:00

2~5 秒！而且还会打断楼主的思绪
原谅我见识少，笑了。。。。。

128

nigulasida

2019-01-02 19:54:43 +08:00

楼主。。。真是矫情的可爱

129

xmsz

2019-01-02 22:05:33 +08:00

？？？？？？？等一下，你确定不是用手机编程？

----- 这是我其中一个项目的 Log ---

WAIT Compiling... 11:52:41

DONE Compiled successfully in 1021ms 11:52:42

WAIT Compiling... 11:52:42

DONE Compiled successfully in 529ms 11:52:43

WAIT Compiling... 11:54:04

DONE Compiled successfully in 604ms 11:54:06

WAIT Compiling... 11:55:10

我的项目是 50 几个页面，电脑还是 15 老版 pro，还得跑 sketch chrome，最慢也是 1s，哪来的 2 ～ 5 秒？？？

如果你说编译慢，那倒是，我都要快 1 分钟，但一般情况都是服务器 build。

然后，如果真的是 2 ～ 5 秒，我建议要不换台电脑或者 coding 的在线 IDE。

还有不要被其他人误导，这是我第一次听过要这么久的

130

hellowes

2019-01-02 22:13:45 +08:00

@xmsz 看样子好像不是 webpack，你用的是啥编译工具求问

131

johnnie502

2019-01-02 22:35:17 +08:00

有没有用 gulp 的？和 webpack 比速度如何

132

xmsz

2019-01-03 09:55:50 +08:00

@hellowes webpack + vue
{
"scripts": {
"dev": "node wpk/dev.js",
},
"dependencies": {
"vue": "^2.5.21",
"vue-axios": "^2.1.3",
"vue-router": "^3.0.2",
"vuex": "^3.0.1",
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/node": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"autodll-webpack-plugin": "^0.4.2",
"autoprefixer": "^9.4.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.2",
"css-loader": "^2.1.0",
"eslint": "^5.11.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-vue": "^5.0.0",
"file-loader": "^3.0.1",
"html-webpack-include-assets-plugin": "^1.0.6",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.5.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"px2rem-loader": "^0.1.9",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"uglifyjs-webpack-plugin": "^2.1.1",
"url-loader": "^1.1.1",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.28.3",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.1.5"
}
}