阅读 1304

JS SDK 构建实现 Webpack VS Rollup

零、前言

最近一段时间在开发 JavaScript SDK,讲究 原生、短小、快速、清晰、可读性、可测试性 等等。

JavaScript SDK 开发思想参照 JavaScript SDK Design Guide

而 SDK开发 关键的一环则是 打包, 恰恰打包这一环决定了 SDK 的体积(短小)、引入方式(原生),一部分速度问题(快速)。

开发过程中分别使用 Webpack5 与 Rollup 打包。

本次 SDK 体积经历 88kb(webpack production 打包) -> 59kb(rollup 打包) -> 33kb (rollup 加上 plugin-transform-runtime 后打包)。

最后之所以能从 88kb 到 33kb,是因为 Rollup 和 Webpack5 的 terser 、 tree shaking 、 plugin-transform-runtime 拉开差距。

因为 Rollup 打包后体积更小,Webpack 在 dev 下热更效果较好, 最后决定使用 Rollup 作为 production 打包工具,Webpack5 作为 development 打包工具。

抛出最经典名言: Use webpack for apps, and Rollup for libraries

Webpack---拆得好,并得巧

Webpack 始于2012年,由 Tobias Koppers发起,用于解决当时现有工具未解决的的一个难题:构建复杂的单页应用程序(SPA)。特别是 webpack 的两个特性改变了一切:

  1. 代码拆分(Code Splitting)

    使你可以将应用程序分解成可管理的代码块,可以按需加载,这意味着你的用户可以快速获取交互性的网站,而不必等到整个应用程序下载和解析完成。当然你可以手动来完成这项工作,那么祝你好运。
  2. 静态资源(Static assets)

    如图像和 CSS 可以导入到你的应用程序中,而且还能够被作为依赖图中的另一个节点。再也不用关心你的文件是否放在正确的文件夹中,再也不用为文件 URL 增添 hash 而使用 hack 脚本,因为 webpack 会帮我们处理这些事情。

Rollup---打得小,跑得快

Rollup 是下一代 JavaScript 模块打包工具。开发者可以在你的应用或库中使用 ES2015 模块,然后高效地将它们打包成一个单一文件用于浏览器和Node.js使用。 Rollup 最令人激动的地方,就是能让打包文件体积很小,Rollup总能打出更小,更快的包:

  1. Tree-shaking

    Rollup 最初推出时的一大特点。Rollup 通过对代码的静态分析,分析出冗余代码,在最终的打包文件中将这些冗余代码删除掉,进一步缩小代码体积。
  2. ES2015 模块打包支持

    ES2015 模块打包支持这个也是其他构建工具所不具备的。Rollup 直接不需要通过 babel 将 import 转化成 Commonjs 的 require 方式,极大地利用 ES2015 模块的优势。

一、配置

Webpack5 打包配置

由于一开始项目使用 Webpack 打包,所以配置了 development 与 production 两个config
ps: 下文可能会出现 babel ,由于非本文讨论重点,会略过。

安装Webpack及其相关:

yarn add -D webpack@5.0.0-beta.22
yarn add -D webpack-cli
yarn add -D webpack-dev-server
yarn add -D webpack-merge
复制代码

在项目中添加以下配置文件: webpack.config.js

const {merge} = require('webpack-merge')
const productionConfig = require('./webpack.prod.conf.js') // 引入生产环境配置文件
const developmentConfig = require('./webpack.dev.conf.js') // 引入开发环境配置文件
const webpack = require('webpack')
const path = require('path')

const baseConfig = {
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.(less|css)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js', '.tsx', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  plugins: [
    new webpack.ProvidePlugin({
      h: ['dom-chef', 'h'],
    }),
  ],
}

module.exports = env => {
  // mode: 'production' || 'development',
  let config = env === 'production' ? productionConfig : developmentConfig
  console.log('当前模式:', env, config)
  return merge(baseConfig, config) // 合并 公共配置 和 环境配置
}
复制代码

(混入 babel)

安装babel及其相关:

yarn add -D @babel/core
yarn add -D @babel/preset-env
yarn add -D @babel/preset-typescript
yarn add -D @babel/plugin-syntax-typescript
yarn add -D @babel/plugin-transform-react-jsx
复制代码

babel.config.js

const presets = [
  [
    '@babel/preset-env',
    {
      targets: {
        edge: '17',
        firefox: '60',
        chrome: '67',
        safari: '11.1',
        ie: '11',
      },
      useBuiltIns: 'usage',
      corejs: 3,
    },
  ],
  ['@babel/preset-typescript'],
]
const plugins = [
  ['@babel/plugin-syntax-typescript'],
  [
    '@babel/plugin-transform-react-jsx',
    {
      pragma: 'h',
      pragmaFrag: 'DocumentFragment',
    },
  ],
]
module.exports = {presets, plugins}
复制代码

webpack.prod.conf.js

const path = require('path')

module.exports = {
  mode: 'production',
  entry: {
    index: path.resolve(__dirname, './src/app.ts'),
  },
  output: {
    libraryTarget: 'umd',
    path: __dirname + '/dist',
    filename: 'index.js',
    library: '@efox/pay',
  },
  performance: {
    hints: 'error',
  },
  plugins: [],
  optimization: {
    minimize: true,
  },
}
复制代码

webpack.dev.conf.js

const path = require('path')

module.exports = {
  mode: 'development',
  entry: {
    index: path.resolve(__dirname, './src/app.ts'), //入口
  },
  output: {
    libraryTarget: 'umd',
    path: __dirname + '/dist',
    filename: 'index.js',
    library: '@efox/pay',
  },
  devtool: 'source-map',
  performance: {
    hints: 'warning',
  },
}

复制代码

启动

dev 命令:

webpack --env development --watch

build命令:

cp src/index.d.ts dist && webpack --env production

使用上述配置 Webpack5 打包本 SDK ,包体积为 88kb

Rollup 打包配置

安装 Rollup 及其相关:

yarn add -D rollup
yarn add -D rollup-plugin-commonjs
yarn add -D rollup-plugin-inject
yarn add -D rollup-plugin-terser
yarn add -D rollup-plugin-typescript2
复制代码

rollup.config.js

import typescript from 'rollup-plugin-typescript2'
import babel from 'rollup-plugin-babel'
import {DEFAULT_EXTENSIONS} from '@babel/core'
import commonjs from 'rollup-plugin-commonjs'
import nodeResolve from 'rollup-plugin-node-resolve'
import json from 'rollup-plugin-json'
import inject from 'rollup-plugin-inject'
import {terser} from 'rollup-plugin-terser'

export default {
  input: 'src/app.ts', // 入口文件
  output: {
    name: 'efoxPay', // umd 模式必须要有 name  此属性作为全局变量访问打包结果
    file: `dist/index.js`,
    format: 'umd',
    sourcemap: true,
  },
  plugins: [
    json({
      // All JSON files will be parsed by default,
      // but you can also specifically include/exclude files
      include: 'node_modules/**',
      exclude: ['node_modules/foo/**', 'node_modules/bar/**'],

      // for tree-shaking, properties will be declared as
      // variables, using either `var` or `const`
      preferConst: true, // Default: false

      // specify indentation for the generated default export —
      // defaults to '\t'
      indent: '  ',

      // ignores indent and generates the smallest code
      compact: true, // Default: false

      // generate a named export for every property of the JSON object
      namedExports: true, // Default: true
    }),
    nodeResolve({
      jsnext: true,
      main: true,
    }),
    commonjs({
      include: 'node_modules/**', // Default: undefined
      namedExports: {
        'node_modules/dom-chef/index.js': ['dom-chef'],
        'node_modules/dom-chef/index.json': ['svg-tag-names/'],
      },
    }),
    typescript({
      tsconfigOverride: {
        compilerOptions: {
          declaration: false, // 输出时去除类型文件
        },
      },
    }),
    babel({
      extensions: [...DEFAULT_EXTENSIONS, 'ts', 'tsx', 'js'],
      runtimeHelpers: true,
      exclude: 'node_modules/**',
      babelrc: false,
      presets: ['@babel/preset-env'],
      plugins: [['@babel/plugin-transform-runtime', {useESModules: false}]],
    }),
    inject({
      h: ['dom-chef', 'h'],
    }),
    terser(),
  ],
}
复制代码

启动

打包命令:

rollup -c

使用上述配置 Rollup 打包本 SDK ,包体积为 33kb

接下来,本文将讨论打包过程中最重要的插件和算法。

二、 terser

Terser 是 ES6+ 的 JavaScript 解析器 和 mangler/compressor 工具包, 它可能是最有效的。Terser 建议搭配 Rollup 打包使用,这样会产生更小的代码。

如果要在 Rollup 上使用 Terser ,需要安装 rollup-plugin-terser

yarn add -D rollup-plugin-terser

并在 rollup.config.js 上引入

import {terser} from 'rollup-plugin-terser'
export default {
 plugins: [
    terser(),
 ]
}
复制代码

虽然 Rollup 是一个不错的选择,但如果使用 webpack 大于 v4,默认情况下会使用 Terser。 可以通过 optimization.minimize 来启用 Terser ,如下所示:

  optimization: {
    minimize: true,
  },
复制代码

三、 tree shaking

Webpack5 和 Rollup 都自带了 tree shaking。 静态分析代码中的 import,并将排除任何未实际使用的代码。这允许架构于现有工具和模块之上,而不会增加额外的依赖或使项目的大小膨胀。

例如,在使用 CommonJS 时,必须导入(import)完整的工具(tool)或库(library)对象。

// 使用 CommonJS 导入(import)完整的 utils 对象
var utils = require( 'utils' );
var query = 'Rollup';
// 使用 utils 对象的 ajax 方法
utils.ajax( 'https://api.example.com?search=' + query ).then( handleResponse );
复制代码

但是在使用 ES6 模块时,无需导入整个 utils 对象,我们可以只导入(import)我们所需的 ajax 函数:

// 使用 ES6 import 语句导入(import) ajax 函数
import { ajax } from 'utils';
var query = 'Rollup';
// 调用 ajax 函数
ajax( 'https://api.example.com?search=' + query ).then( handleResponse );
复制代码

tree shaking 只引入最基本最精简代码,所以可以生成轻量、快速,以及低复杂度的 library 和应用程序。因为这种基于显式的 import 和 export 语句的方式,它远比「在编译后的输出代码中,简单地运行自动 minifier 检测未使用的变量」更有效。

可能是 rollup 的 tree shaking 算法更好的原因, webpack5 和rollup 同样经过 tree shaking 之后,rollup 打出的包体积更小。

四、 plugin-transform-runtime

A plugin that enables the re-use of Babel's injected helper code to save on codesize.

为了浏览器向下兼容,会使用 @babel/preset-env 对每个文件的 ES6 语法进行转换,我们称之为辅助函数。

但样这做存在一个问题。在正常的前端工程开发的时候,少则几十个js文件,多则上千个。如果每个文件里都使用了class类语法,那会导致每个转换后的文件上部都会注入这些相同的函数声明。这会用构建工具打包出来的包非常大,包含大量重复代码。

一个思路就是,把这些函数声明都放在一个 npm 包里,需要使用的时候直接从这个包里引入到我们的文件里。这样即使上千个文件,也会从相同的包里引用这些函数。通过 webpack 这一类的构建工具打包的时候,只会把使用到的 npm 包里的函数引入一次,这样就做到了复用,减少了体积。

安装 @babel/runtime 包提供辅助函数模块,安装Babel插件 @babel/plugin-transform-runtime 来自动替换辅助函数。

   yarn add -D @babel/preset-env
   yarn add -D @babel/runtime
   yarn add -D @babel/plugin-transform-runtime
复制代码

并在 rollup.config.js 上引入

import babel from 'rollup-plugin-babel'
export default {
 plugins: [
    babel({
      extensions: [...DEFAULT_EXTENSIONS, 'ts', 'tsx', 'js'],
      runtimeHelpers: true,
      exclude: 'node_modules/**',
      babelrc: false,
      presets: ['@babel/preset-env'],
      plugins: [['@babel/plugin-transform-runtime', {useESModules: false}]],
    }),
    ]
}
复制代码

五、 总结

  • 在不配置第三方插件的情况, Rollup 打包本 SDK 依然比 Webpack5 小,证实了:在开发应用时使用 Webpack,开发库时使用 Rollup(打包应用,Webpack 对静态资源的打包很完美)。
  • Rollup 比 Webpack5 的 tree shaking 效果好
  • 本 SDK 把原有 css文件剔除了集成进 tsx 文件,因为 Rollup 对支持静态资源支持不佳,有得有失,包体更小了。而 Webpack 对于代码分割和静态资源导入有着“先天优势”,但是自然会导致包体变大。
  • plugin-transform-runtime 是打包必须引入的插件,可以将重复的辅助函数自动替换,节省大量体积。

作者


Benny Shi