前言
构建篇的 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);
image
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' // 日志级别。可以是'信息','警告','错误'或'沉默'。
})
image这配置基本也很少有人去改,随便放出来看看得了
如图所示,打包出的文件包含哪些,大小占比如何,模块包含关系,依赖项,文件是否重复,压缩后大小如何,我们可以针对上图所以进行更进一步的优化
优化过程
缓存配置
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 的构建速度有个明显提升
image提升构建速度升一倍,美滋滋
多核构建
- 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',
}
image
使用 externals 抽取公用代码,放在 cdn,使用 script 标签引入
推荐理由:
如果你的项目能保证同域名,只根据网关区别项目的话,建议上这个配置,毕竟一个项目打开了,剩下的项目都会直接走缓存,提高后续项目的打开速度
不建议:
- 需要自己部署 cdn,第三方的不稳定,挂掉可能就需要喝茶了
- 项目版本依赖引用,升级会有问题,有一定的维护成本
- 不用的项目版本不一致,引用不一致,增加单个项目引用体积
下篇出一个插件,来解决这个问题,其实我们公司用的挺嗨的,需要改的通用点
hard-source-webpack-plugin
这个插件大杀器,放在最后隆重介绍一下,随便放上去就行,为模块提供中间缓存的。
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
// ...... plugins: [
new HardSourceWebpackPlugin()
]}
附上最后项目构建的时间图
image构建速度从最开始的 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 累),项目完成之后,会开放部分源码供各位同学参考。
为什么是开放部分源码,因为有些业务是需要贴合实际项目针对性开发的,开放出去的公共模块我写的认真点
为了写个系列博客,居然真撸完整个系统(不是一般的累),觉得不错的同学麻烦顺手三连(点赞,关注,转发)。
网友评论