观麦在 Webpack 的经验

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

因为涉及知识点多，不作具体的介绍，只点出关键内容。 对应代码在 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.js npm 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