共计 3218 个字符，预计需要花费 9 分钟才能阅读完成。
从 0 到 1 负责手上项目一年多了，webpack 虽然是老生常谈的话题，但只有出现问题时，才会去思考怎么去优化。由于项目里引入了越来越多的依赖，所以本地开发编译过程越来越慢，因此才有了这一次的 webpack 优化。顺便对一些生产环境的静态资源也做了一些优化。
一.HappyPack 多线程编译
Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz 8 核 16 线程
webpack 3.12.0 ThreadPool.size:16
本地构建速度：
51281ms（未引入 happypack）
43750ms（引入 happypack eslint-loader）
35862ms（引入 happypack eslint-loader, vue-loader）
35476ms（引入 happypack eslint-loader, vue-loader, babel-loader）
打包 dist 速度：
58192ms（未引入 happypack）
49745ms（引入 happypack eslint-loader）
46505ms（引入 happypack eslint-loader, vue-loader）
43358ms（引入 happypack eslint-loader, vue-loader, babel-loader）
从上面的实验数据可以得出：无论是本地构建还是打包 dist，eslint-loader，vue-loader，babel-loader 的 happypack 对编辑速度都是有提升的。
二.TinyPng 优化静态图片资源
https://tinypng.com/
三. 优化 loader 配置
cacheDirectory 开启缓存，include 去除无需处理文件。
// 配置前
{
test: /\.js$/,
loader:‘babel-loader',
include: [resolve('src'), resolve(’test'), resolve('node_modules/webpack-dev-server/client')],
},// 配置后
{
test: /\.js$/,
loader:‘babel-loader?cacheDirectory=true’,// 开启缓存加速
include: [resolve('src'), resolve('node_modules/webpack-dev-server/client')], // 并无单测，去除 test 目录
},四. 优化包查找路径
使用绝对路径，只在给定目录中搜索，省去了查找依赖的时间损耗
因为默认设置是 [node modules]。从当前目录找 node_modules，若没有，从../node_modules 找，若是再没有，继续找../node_modules，直到找到为止。
我手上的项目是直接存在 src,build 目录同级的 node_modules 下的，所以可以按照下面这样修改。
// 配置前
resolve: {modules: ["node_modules”],
}// 配置后
resolve: {modules: [path.join(__dirname, '..', "node_modules”)] // 这个路径根据构建文件所在位置去调整，此处是 build/webpack.base.conf.js，node_modules 目录与 src 目录同级
}五. 消除无更新的图片资源计算
由于项目中的一些图片资源是一直不变的，因此没有必要每次都通过 url-loader 或 file-loader 加载打包，消除转换 base64url 或者 <hashType><digestType>，所以图片资源尽可能使用绝对路径引入 /static 下的文件，而不是通过 import 去引入。
出于优化成本考虑，我这次仅仅将超过 limit 的图片进行转移。
转移前：vue.40add6f.png
转移后：vue.png
例如预发环境，若是不同环境的 BASE_URL 不一样，可以通过 DefinePlugin 和 <=%BASE_URL%=> 传入。
config.js
{
dev:{BASE_URL:’/’,},
build:{BASE_URL:’/foo/bar/’,}
}webpack.dev.conf.js
plugins:{
new webpack.DefinePlugin({BASE_URL:JSON.stringify(config.dev.BASE_URL),
}),
},webpack.prod.conf.js
plugins:{
new webpack.DefinePlugin({BASE_URL:JSON.stringify(config.build.BASE_URL),
}),
},<link rel="icon" href=“<%=BASE_URL=%>static/favicon.ico">
favicon.ico 的路径地址如下：
在开发环境是：localhost:9090/static/favicon.ico
在生产环境是：https://www.jsnb.com/foo/bar/…
在单文件组件内该如何操作呢？
很简单，只要与 src 同级创建一个 baseUrl.js，然后在文件中绑定到组件 data 函数上即可。
// eslint-disable-next-line no-undef
export default BASE_URL;
<img :src=“Logo" />
const Logo = `${baseUrl}static/logo.png`;
data(){
return {Logo,}
}优点：
1. 迁移 assets 下大文件到 static，减少计算 hash 时间，通过 /static 引入。
2.DefinePlugin，根据环境切换 static 引入路径统一引入。（若通过 webpack 的 resolve.alias 统一引入，还是会被 url-loader 加载，还是会去做计算）。
缺点：
1. 构建提升速度收效甚微
2. 有缓存文件不能用此方法，会有缓存
3. 图片文件存放分散，不便于管理
建议：在没有遇到由于 url-loader，file-loader 加载图片，视频等本地资源慢的情况下，可以一直使用 assets 的方式，不用折腾。
六. 提升开发环境 rebuild 速度
source map 众所周知是为了 webpack debug 的一个配置，有 7 个配置。可以参考官方文档 https://webpack.js.org/configuration/devtool/ 和我之前做的一个小实验 https://github.com/FrankKai/FrankKai.github.io/issues/58 做对比。
开发环境：
devtool:’source-map’->devtool:‘eval-source-map’
rebuild 速度从 –slow 提升到了 +pretty fast。
提速原因是：SourceMap 转换为 DataUrl 加载到 eval() 中。重新构建时速度更快，
官方文档介绍如下：
eval-source-map – Each module is executed with eval() and a SourceMap is added as a DataUrl to the eval(). Initially it is slow, but it provides fast rebuild speed and yields real files. Line numbers are correctly mapped since it gets mapped to the original code. It yields the best quality SourceMaps for development.
斯世浊清，全赖吾辈激扬！
