H5 基础脚手架：极速构建项目

前言

构建篇的 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 标签引入

推荐理由：

如果你的项目能保证同域名，只根据网关区别项目的话，建议上这个配置，毕竟一个项目打开了，剩下的项目都会直接走缓存，提高后续项目的打开速度

不建议：

1. 需要自己部署 cdn，第三方的不稳定，挂掉可能就需要喝茶了
2. 项目版本依赖引用，升级会有问题，有一定的维护成本
3. 不用的项目版本不一致，引用不一致，增加单个项目引用体积

下篇出一个插件，来解决这个问题，其实我们公司用的挺嗨的，需要改的通用点

hard-source-webpack-plugin

这个插件大杀器，放在最后隆重介绍一下，随便放上去就行，为模块提供中间缓存的。

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
  // ......  plugins: [
    new HardSourceWebpackPlugin()  
]}

附上最后项目构建的时间图

image

构建速度从最开始的 7s 优化到最后的 2.5s（主要是二次构建，缓存提效，你就说爽不爽吧）。

上述的配置都可通用，并实际使用过，提效不大的就没放上去了，没啥意思。构建过比较复杂的有上百个页面的项目只是使用了 9s 左右，有兴趣可以自己再试试。

全系列博文目录

后端模块

1. DevOps - Gitlab Api使用（已完成，点击跳转）
2. DevOps - 搭建 DevOps 基础平台 基础平台搭建上篇 | 基础平台搭建中篇 | 基础平台搭建下篇
3. DevOps - Jenkins 流水线构建
4. DevOps - Gitlab CI 流水线构建
5. DevOps - Docker 使用
6. DevOps - 发布任务流程设计
7. DevOps - 代码审查卡点
8. DevOps - Node 服务质量监控

前端模块

1. DevOps - H5 基础脚手架
2. DevOps - React 项目开发

后期可能会根据 DevOps 项目的实际开发进度对上述系列进行调整

尾声

此项目是从零开发，后续此系列博客会根据实际开发进度推出（真 TMD 累），项目完成之后，会开放部分源码供各位同学参考。

为什么是开放部分源码，因为有些业务是需要贴合实际项目针对性开发的，开放出去的公共模块我写的认真点

为了写个系列博客，居然真撸完整个系统（不是一般的累），觉得不错的同学麻烦顺手三连（点赞，关注，转发）。