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

4,283 阅读5分钟

前言

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

推荐理由:

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

不建议:

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

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

hard-source-webpack-plugin

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

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

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

构建速度从最开始的 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 累),项目完成之后,会开放部分源码供各位同学参考。

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

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