fix: reduce bundle size by not bundling npm dependencies

fluent-vue · Feb 18, 2020 · 6faca34 · 6faca34
1 parent a07a8e3
commit 6faca34
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 10 deletions.
diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json
@@ -15,5 +15,6 @@
   "devDependencies": {
     "@vue/component-compiler-utils": "^3.0.0",
     "parcel-bundler": "^1.12.3"
-  }
+  },
+  "browserslist": ["last 1 Chrome versions"]
 }
diff --git a/examples/typescript/package.json b/examples/typescript/package.json
@@ -15,5 +15,6 @@
   "devDependencies": {
     "@vue/component-compiler-utils": "^3.0.0",
     "parcel-bundler": "^1.12.3"
-  }
+  },
+  "browserslist": ["last 1 Chrome versions"]
 }
diff --git a/rollup.config.ts b/rollup.config.ts
@@ -15,7 +15,7 @@ export default {
     { file: pkg.module, format: 'es', sourcemap: true },
   ],
   // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')
-  external: [],
+  external: ['cached-iterable', '@fluent/sequence'],
   watch: {
     include: 'src/**',
   },

diff --git a/src/fluent-vue.ts b/src/fluent-vue.ts
@@ -1,9 +1,8 @@
-import Vue from 'vue'
+import Vue, { VueConstructor } from 'vue'
 import { CachedSyncIterable } from 'cached-iterable'
 import { mapBundleSync } from '@fluent/sequence'
 import { warn } from './util/warn'
 
-import { VueConstructor } from 'vue/types/vue'
 import { Pattern, FluentBundle } from '@fluent/bundle'
 import { FluentVueObject, IUpdatable, FluentVueOptions } from './interfaces'
 

diff --git a/src/install.ts b/src/install.ts
@@ -1,4 +1,4 @@
-import { Vue } from 'vue/types/vue'
+import Vue from 'vue'
 import extend from './extend'
 import mixin from './mixin'
 import directive from './vue/directive'

diff --git a/src/vue/component.ts b/src/vue/component.ts
@@ -1,6 +1,16 @@
-import Vue from 'vue'
+import { FunctionalComponentOptions } from 'vue'
+import { RecordPropsDefinition } from 'vue/types/options'
 
-export default Vue.extend({
+interface ComponentProps {
+  path: string
+  tag?: string
+  args?: Record<string, unknown>
+}
+
+const component: FunctionalComponentOptions<
+  ComponentProps,
+  RecordPropsDefinition<ComponentProps>
+> = {
   name: 'i18n',
   functional: true,
   props: {
@@ -28,4 +38,6 @@ export default Vue.extend({
 
     return h(props.tag, data, parts)
   }
-})
+}
+
+export default component
diff --git a/src/vue/directive.ts b/src/vue/directive.ts
@@ -1,7 +1,8 @@
 import { DirectiveOptions } from 'vue'
+import { DirectiveBinding } from 'vue/types/options'
+
 import { warn } from '../util/warn'
 import { FluentVueObject } from '../interfaces'
-import { DirectiveBinding } from 'vue/types/options'
 
 // This part is from fluent-dom library
 const LOCALIZABLE_ATTRIBUTES = {