前言
构建篇的 h5 项目构建配置，没有阅读过前文的读者拉到下方系列目录即可预览全系列
虽然 webpack 的优化配置博文烂大街了，还是稍微提一下，补充在完全体的系列里面
Webpack
辅助分析插件
speed-measure-webpack-plugin
使用该插件，可以在编辑过程中去计算 loader 跟 plugin 的运行时间，针对性的看下某个环境构建速度过慢的原因
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const webpackConfig = {
plugins: [
new MyPlugin(),
new MyOtherPlugin()
]
}
module.exports = smp.wrap(webpackConfig);
webpack-bundle-analyzer
使用该插件，可以输出 html，分析打包后输出的bundle体积大小
new BundleAnalyzerPlugin({
// 可以是`server`，`static`或`disabled`。
// 在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
// 在“静态”模式下，会生成带有报告的单个HTML文件。
// 在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
analyzerMode: 'server',
// 将在“服务器”模式下使用的主机启动HTTP服务器。
analyzerHost: '127.0.0.1',
// 将在“服务器”模式下使用的端口启动HTTP服务器。
analyzerPort: 8888,
// 路径捆绑，将在`static`模式下生成的报告文件。
// 相对于捆绑输出目录。
reportFilename: 'report.html',
// 模块大小默认显示在报告中。
// 应该是`stat`，`parsed`或者`gzip`中的一个。
// 有关更多信息，请参见“定义”一节。
defaultSizes: 'parsed',
// 在默认浏览器中自动打开报告
openAnalyzer: true,
// 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
generateStatsFile: false,
// 如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
// 相对于捆绑输出目录。
statsFilename: 'stats.json',
// stats.toJson（）方法的选项。
// 例如，您可以使用`source：false`选项排除统计文件中模块的来源。
// 在这里查看更多选项：https： //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
logLevel: 'info' // 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
})
这配置基本也很少有人去改,随便放出来看看得了
如图所示，打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何，我们可以针对上图所以进行更进一步的优化
优化过程
缓存配置
babel-loader 缓存
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve("babel-loader"),
options: {
customize: require.resolve(
"babel-preset-react-app/webpack-overrides"
),
plugins: [
[
require.resolve("babel-plugin-named-asset-import"),
{
loaderMap: {
svg: {
ReactComponent:
"@svgr/webpack?-svgo,+titleProp,+ref![path]",
},
},
},
],
["lodash"],
],
cacheDirectory: true,
cacheCompression: false,
compact: isEnvProduction,
},
}
terser-webpack-plugin 缓存
new TerserPlugin({
terserOptions: {
parse: {
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
drop_console: true,
comparisons: false,
inline: 2,
},
mangle: {
safari10: true,
},
keep_classnames: isEnvProductionProfile,
keep_fnames: isEnvProductionProfile,
output: {
ecma: 5,
comments: false,
ascii_only: true,
},
},
parallel: true,
cache: true,
sourceMap: shouldUseSourceMap,
})
主要是把你项目中的 loader 跟 plugin 的缓存配置加上，效果如图，仔细对比二次构建的时候开启缓存的loader 跟 plugin 的构建速度有个明显提升
提升构建速度升一倍，美滋滋
多核构建
- uglifyjs-webpack-plugin
- happypack
- thread-loader
这三个用的最多了，网上随便搜搜一大把，看官自己手动百度、Google 吧
别人都有的内容，我就列一下，实际效果挺不理想，连配置都懒得贴上去
代码拆分
splitChunks: {
chunks: 'initial', // 用于命中chunk，function (module, chunk) | RegExp | string
cacheGroups: {
common: {
chunks: 'initial', // all、async、initial，默认async
minChunks: 5, // 最小共用模块数
name: 'common', // 模块名
priority: 9, // 优先级
enforce: true // 忽略splitChunks设置
},
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
priority: 10,
enforce: true
}
}
},
上述是通过 webpack4 的 splitChunks 分割代码，上述一个是提取公共模块引用，一个是提取第三方模块引用
这玩意拆分要看自己的需求，不过对构建速度提升不多，对项目使用优化有需求的可以试试
CDN 配置（推荐 & 不建议）
externals: {
moment: 'window.moment',
antd: 'window.antd',
lodash: 'window._',
react: 'window.React',
'react-dom': 'window.ReactDOM',
}
使用 externals 抽取公用代码，放在 cdn，使用 script 标签引入
推荐理由：
如果你的项目能保证同域名，只根据网关区别项目的话，建议上这个配置，毕竟一个项目打开了，剩下的项目都会直接走缓存，提高后续项目的打开速度
不建议：
- 需要自己部署 cdn，第三方的不稳定，挂掉可能就需要喝茶了
- 项目版本依赖引用，升级会有问题，有一定的维护成本
- 不用的项目版本不一致，引用不一致，增加单个项目引用体积
下篇出一个插件，来解决这个问题，其实我们公司用的挺嗨的，需要改的通用点
hard-source-webpack-plugin
这个插件大杀器，放在最后隆重介绍一下，随便放上去就行，为模块提供中间缓存的。
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
// ...... plugins: [
new HardSourceWebpackPlugin()
]}
附上最后项目构建的时间图
构建速度从最开始的 7s 优化到最后的 2.5s（主要是二次构建，缓存提效，你就说爽不爽吧）。
上述的配置都可通用，并实际使用过，提效不大的就没放上去了，没啥意思。构建过比较复杂的有上百个页面的项目只是使用了 9s 左右，有兴趣可以自己再试试。
全系列博文目录
后端模块
- DevOps - Gitlab Api使用（已完成，点击跳转）
- DevOps - 搭建 DevOps 基础平台 基础平台搭建上篇 | 基础平台搭建中篇 | 基础平台搭建下篇
- DevOps - Jenkins 流水线构建
- DevOps - Gitlab CI 流水线构建
- DevOps - Docker 使用
- DevOps - 发布任务流程设计
- DevOps - 代码审查卡点
- DevOps - Node 服务质量监控
前端模块
- DevOps - H5 基础脚手架
- DevOps - React 项目开发
后期可能会根据 DevOps 项目的实际开发进度对上述系列进行调整
尾声
此项目是从零开发，后续此系列博客会根据实际开发进度推出（真 TMD 累），项目完成之后，会开放部分源码供各位同学参考。
为什么是开放部分源码，因为有些业务是需要贴合实际项目针对性开发的，开放出去的公共模块我写的认真点
为了写个系列博客，居然真撸完整个系统（不是一般的累），觉得不错的同学麻烦顺手三连（点赞，关注，转发）。
