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 的两个特性改变了一切:
-
代码拆分(Code Splitting)
使你可以将应用程序分解成可管理的代码块,可以按需加载,这意味着你的用户可以快速获取交互性的网站,而不必等到整个应用程序下载和解析完成。当然你可以手动来完成这项工作,那么祝你好运。 2. ### 静态资源(Static assets) 如图像和 CSS 可以导入到你的应用程序中,而且还能够被作为依赖图中的另一个节点。再也不用关心你的文件是否放在正确的文件夹中,再也不用为文件 URL 增添 hash 而使用 hack 脚本,因为 webpack 会帮我们处理这些事情。
Rollup---打得小,跑得快
Rollup 是下一代 JavaScript 模块打包工具。开发者可以在你的应用或库中使用 ES2015 模块,然后高效地将它们打包成一个单一文件用于浏览器和Node.js使用。 Rollup 最令人激动的地方,就是能让打包文件体积很小,Rollup总能打出更小,更快的包:
-
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 是打包必须引入的插件,可以将重复的辅助函数自动替换,节省大量体积。
作者
![]() |
转载自:https://juejin.cn/post/6859539849972711437