JS SDK 构建实现 Webpack VS Rollup

KenXu
5,826 阅读8分钟

零、前言

最近一段时间在开发 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
avatar
文章
阅读
粉丝
相关推荐
前端监控实践——FMP的智能获取算法
5.4k阅读
 · 
79点赞
Sentry监控系统环境搭建
1.7k阅读
 · 
5点赞
如何编写一个JS SDK
1.6k阅读
 · 
5点赞
前端异常解析之Source Map
2.3k阅读
 · 
18点赞
前端 SDK 开发总结
431阅读
 · 
0点赞
如何在 GA4 （Google Analytics 4）中采集页面加载时间
67阅读
 · 
0点赞
通过页面埋点做监控却不影响性能？解密ARMS前端监控数据上报技术内幕
2.3k阅读
 · 
6点赞
开始使用sentry
11k阅读
 · 
36点赞
serverless实战，基于uniCloud从零开始实现一个前端日志监控系统
902阅读
 · 
7点赞

友情链接：