探索 parcel(tree-shaking) 构建 vue 插件

Posted 水香木鱼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了探索 parcel(tree-shaking) 构建 vue 插件相关的知识,希望对你有一定的参考价值。

一、打包公共代码

在 webpack4 中,可以通过 optimization.minimize 将公共代码进行打包,虽然我个人认为这个东西对SPA应用来说,效果其实有限,但有胜于无,文字再小也是肉不是,所以说,在细节的把控上,永远是无止境的。但是在webpack4中也是将CommonsChunkPlugin 改用 SplitChunksPlugin 了。感觉评论掘友的提醒。

new webpack.optimize.CommonsChunkPlugin({
  name: ['vendor','runtime'],
  filename: '[xxxxx].js'
})
复制代码

删除沉淀代码

二、使用 Tree-Shaking 插件

本次我们要做的是编写一个 vue 的 Tag 组件,使用 parcel 结合 tree-shaking 进行打包。


本次要讲的重点是用 parcel 构建 vue,教大家如何去写一个可以供别的使用的 vue 组件,并发布到 npm 上。

Tag 组件源码分析不是这篇文章的重点,重点是构建思路。

首先说一下为啥使用 parcel 打包而没用 webpack,出发点很简单,为了用 parcel 而用 parcel,哈哈~~~!其实 parcel 有一个优点就是零配置打包,这次使用 parcel 真的是一行配置代码没写。。。 而且 parcel-bundler 是安装到全局的,所以就是说在整个项目中都没有构建工具的痕迹(webpack 4也能做到。。。),parcel 会把你使用的工具都帮你配置好,不过得需要自己安装包。这是官网 https://zh.parceljs.org/getting_started.html,不过遗憾的是里面的 API 不全。。。很多新版本更新的 api 没有在文档里说明,需要自己去 Google,比如本次要用到的 tree-shaking 配置:--experimental-scope-hoisting,在 api 里就没有,在 https://medium.com/@devongovett/parcel-v1-9-0-tree-shaking-2x-faster-watcher-and-more-87f2e1a70f79 里面有详细说明。

下面是项目目录结构:

project
│   README.md
│   entry.js
│   package.json
│   .babelrc
│   .npmignore
│
└─── src
│   │   index.js
│   │   tag.vue
│   │
│   └─── fonts
│       │   iconfont.ttf
│       │   iconfont.woff
│   
└─── demo
│  │   App.vue
│  │   index.html
│  │   main.js
│   
└─── es
   │   index.js

因为组件比较简单,所以没有使用 vue-cli 创建,直接 npm init,然后安装需要的包

npm install vue -S
npm install vue-template-compiler babel-preset-env babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props -D

还有一些其他包,parcel 有一个 autoinstall 功能,是可以自动去 install 项目中引用但是没有下的包。


其中,vue-template-compiler 的作用是解析 .vue 文件的,babel-preset-env 解析 es6 的语法,babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props 这三个是解析 vue 中的 jsx 语法用的。

.babelrc

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ],
  "plugins": ["transform-vue-jsx"]
}

entry.js:打包的入口文件,暴露出 Tag 组件

import Tag from './src';
export default Tag;

src 文件夹:存放源代码

src ---> index.js

import Tag from './tag';

function install (Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component(Tag.name, Tag);
}

const SftcTag = {
  install,
  Tag
};

if (typeof window !== undefined && window.Vue) {
  window.Vue.use(SftcTag)
}

export default SftcTag

index.js 暴露出一个对象,包含有两个属性,Tag 是组件代码,install 为了使用 vue.use 注册 vue 插件。
重点:install 中有一个小技巧,就是这个方法接受了 Vue 参数来注册全局组件。没有在文件中直接使用 import Vue from 'vue'; 的原因是这种引用的 vue 其实是 node_modules 中的 vue/dist/vue.runtime.esm.js,而我们需要利用 tree-shaking 将 vue 抽离出去的时候使用的 vue 应该是 node_modules/vue/dist/vue.common.js,所以需要使用不同 Vue 进行注册决定了 install 方法需要使用接收的 Vue 对象来注册。细心的童鞋一定会对 vue/dist/vue.common.js 有印象,因为在使用 webpack 的 tree-shaking 的时候,使用 alias 配置 'vue$': vue/dist/vue.common.js,和这个道理是一样的,只是 parcel 帮我们做了这件事。

因为组件源码不是这篇文章的重点,所以 tag.vue 的源码放在最后贴上。


三、下面是最重要的部分:parcel 打包!


首先全局安装 parcel

sudo npm install -g parcel-bundler

不用任何配置文件!


在 package.json 中直接写 scripts:

"scripts": {
  "demo": "parcel demo/index.html -p 8090 -d lib",
  "build": "rm -rf lib && parcel build entry.js -d lib --out-file sftctag.min.js --experimental-scope-hoisting",
  "build:nominify": "rm -rf lib && parcel build entry.js -d lib --out-file sftctag.min.js --no-minify --no-source-maps --experimental-scope-hoisting --no-cache"
},

然后直接运行 npm run build,完事!就是这么快!


注意:如果不使用 tree-shaking 打包的话就会把整个的 vue 源代码也打进去,会增加 65KB 体积!加载一个包就会增加 65 KB,如果是 10 个这样的包,那性能损失真的是太大了。

下面说一个 build 命令里都干了哪些事:
rm -rf lib 每次打包删除 之前的打包目录
parcel build entry.js 执行打包命令
-d lib 输出目录文件夹名
--out-file sftctag.min.js 打包文件名
--experimental-scope-hoisting 开启 tree-shaking(parcel 1.9 版本新增特性)

build:nominify 用于查看打包出的源代码,新加了几个配置,也说明下:
--no-minify 不压缩代码
--no-source-maps 不使用 source-map
--no-cache 不使用 .cache

这样整个组件就写完了,parcel 针对这种很小的组件需求,确实是比 webpack 方便很多,但是对于大型项目,开始建议使用 webpack,原因是 parcel 毕竟是小型大包工具很多定制化构建都没有支持,另外现在parcel的相关资料确实不多也不深入。


demo 文件夹:引用 src 中的源码,做一个小 demo,一个是方便看源码的人通过 demo 理解源码。一个是在开发源码时自己做调试。

demo ---> index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>sftable</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but sftable doesn't work properly without javascript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
  <script src="./main.js"></script>
</html>

demo ---> main.js

import Vue from 'vue';
import App from './App.vue';
import Tag from '../src';

Vue.config.productionTip = false;

Vue.use(Tag);

new Vue({
  render: h => h(App),
}).$mount('#app');

demo ---> App.vue

<template>
  <div id="app">
    <div class="container">
      <sftc-tag>标签一</sftc-tag>
      <sftc-tag type="success">标签二</sftc-tag>
      <sftc-tag type="info">标签三</sftc-tag>
      <sftc-tag type="warning">标签四</sftc-tag>
      <sftc-tag type="danger">标签五</sftc-tag>
    </div>

    <div class="container">
      <sftc-tag closable>标签一</sftc-tag>
      <sftc-tag closable type="success" @close="handleClose">标签二</sftc-tag>
      <sftc-tag closable type="info">标签三</sftc-tag>
      <sftc-tag closable type="warning">标签四</sftc-tag>
      <sftc-tag closable type="danger">标签五</sftc-tag>
    </div>

    <div class="container">
      <sftc-tag closable>默认标签</sftc-tag>
      <sftc-tag size="medium" closable>中等标签</sftc-tag>
      <sftc-tag size="small" closable>小型标签</sftc-tag>
      <sftc-tag size="mini" closable>超小标签</sftc-tag>
    </div>

    <div class="container">
      <sftc-tag v-for="item in list" :key="item" closable type="success" @close="handleClose">标签{{ item }}</sftc-tag>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      list: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    handleClose() {
      this.list.pop();
    },
  },
}
</script>

<style>
.container {
  margin-bottom: 30px;
}
</style>

下一步是发布 npm 包,具体发布 npm 包的方法我就不多介绍了,网上配置文章很多,下面主要说一下 package.json 中的 module 字段配置,Tag 组件的 module 配置是: es/index.js,下面是 index.js 的代码:

export { default } from '../lib/sftctag.min.js';
export * from '../lib/sftctag.min.js'
import '../lib/sftctag.min.css'

很简单就是暴露出了 js 源码并引入需要的 css 文件
package.json 中引入 module 是为了拥抱 ES2015 中的 ES Module,所以也可以享受 tree-shaking 的特性,之前 package.json 一直用 main 字段做入口文件。具体解释可以参考这篇文章:《package.json 中的 Module 字段是干嘛的》


使用 Tag 组件方法:

import Vue from 'vue'
import SftcTag from 'sftctag'
Vue.use(SftcTag)
<sftc-tag>标签</sftc-tag>

因为 Tag 组件依赖使用者项目的 vue ,所以使用 Tag 组件前必须先引入 vue ,否则会报错。

使用方法和相关 API,最好都写到 README.md 中,方便使用者阅读。

以上是关于探索 parcel(tree-shaking) 构建 vue 插件的主要内容,如果未能解决你的问题,请参考以下文章

10点公开课:快手GPU/FPGA/ASIC异构平台的应用探索

简析webpack中的tree-shaking

tree-shaking还得是rollup,webpack不行?

特定领域知识图谱知识融合方案(实体对齐):基于图神经网络的商品异构实体表征探索

Vue3全局Api支持tree-shaking后的一些变更

webpack原理:ES6 module在Webpack中如何Tree-shaking构建