观麦在 Webpack 的经验

2018-02-05 10:35:24来源:https://segmentfault.com/a/1190000013095835作者:SegmentFault人点击

分享


原文https://github.com/gmfe/Think...



由于涉及知识点多,不做具体的介绍,只点出关键内容。 对应代码在demo-webpack
可找到。


缓存


生成文件名[name].[contenthash:8].js
,结合 max-age + cdn 做缓存。


网页加载
html

以前是固定的一个 html, html -》版本号 js 文件(通过webpack打出来的)-》通过版本号确定具体 js。(现在想想不太合理,虽然没和后台耦合这么重)


现在是变动的 html,通过 HtmlWebpackPlugin 打出来(webpack 生成,里面包含版本号的 js)


这样还省了一个串行时间(拉版本号文件)。 同时也便于做灰度,比如发布了需求,让一部分用户先体验,动态打出 html 给到后台即可。(固定 html 则没这么轻松做)


css分离


在观麦,css变动会非常的少,这得益于react-gm
对类名的完善。 既然变动少,把 css 单独出来也不错,使用 ExtractTextPlugin 分离 css。


分离后减少 js 大小,不阻塞 js,同时 css 和 js 可同时拉取。


common
new CommonsChunkPlugin({name: 'commons'})

看打包后的 common 代码,会发现其他模块的id和hash都会打在common中,这样每次 commons 文件都会变,就很难做缓存了。


提供两个文件列表即可,会发现 webpack 吧 id 和 hash 打在 manifest 文件中。这样commons就可以缓存了。btw,没看到官网有介绍,看到的说声。


new CommonsChunkPlugin({names: ['commons', 'manifest']})
本地开发

讲讲代理,本地开始是自己起的服务,没有后台服务,自然需要代理到某个地方。 可通过 devServer.proxy 。也可代理到外网排查 bug,都是源码,查 bug 非常快。


"proxy": {
"/ticket/*": {
"target": "http://dev.guanmai.cn:7413",
"changeOrigin": true
}
}
打包速度
DllPlugin

当项目大了后,必然需要打很多包,导致打包时间非常长。 官方推荐做法是把不常变动的文件打DLL。



我们工程就把react
react-dom
prop-types
classnames
mobx
mobx-react
lodash
moment
big.js
等打进来。



网上资料都介绍 dll 的 文件名是 [name]_[hash].dll.js, 我们是 [npm version]_dll.jsnpm version
是 package.json version 读进来的。


为什么不用 hash 而是 npm version?我们在思考二次打包的时候遇到了问题,怎么判断 dll 是否需要重新打包?如果是 hash 怎么搞(求推荐方案)。用 npm version 的话只要 version 一改变我们会重新打包,比如升级了 react ,我们就会 version +,就会重新打包。


happypack


happypack
对 build 的速度大大大提示,可以多线程打包,cache 也让 rebuild 加快。


devtool

开发用 eval,生产用 source-map(用于排查显示问题,牺牲了打包速度,在可接受范围内)


babel-loader

记得 cacheDirectory


noParse && alias


有些库不需要解析的,noParse
配置不解析,同时alias
指向 x.min.js 文件。


tree shaking


没有用上,感觉还不是时候。有篇文章不错你的Tree-Shaking并没有什么卵用


压缩
UglifyJsPlugin

一开始用的是 webpack.optimize.UglifyJsPlugin,那时 1.x 版本,webpack 基于 uglify-js@2.x。


现在 webpack 单独出来了, 也多了很多功能,支持 cache ,支持多核压缩,我试用了下速度还是挺快的。webpack.optimize.UglifyJsPlugin 实际上是 uglifyjs-webpack-plugin。



令我奇怪的是官方说
基于 uglify-es 。可我看依赖还是 uglify-js。奇怪。


UglifyJsParallelPlugin

在官方没出来前用的是 webpack-uglify-parallel , 支持多核。速度和 uglifyjs-webpack-plugin 差不了多少。


写文章是翻了下 github,发现7月份的时候开始废弃了,集成到官方了。


其他


babel 出的babel-minify-webpack-plugin
,保持观望。


脚本cdn

有些 js(gm-fetch babel-polyfill) 实在是非常少非常少变动,用 webpack 打包有点浪费,可以通过 cdn 获取,script 形式放入 html 文档内。


分析

有图表,非常直观的分析。我比较喜欢。


webpack-monitor


老牌的是webpack-bundle-analyzer


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台