revert: change default ES module bundler module (#256)

* revert: change default ES module bundler module

* update textlintrc

* updates docs

* update docs

Author: kazupon

.textlintrc.js

@@ -28,6 +28,7 @@ module.exports = {
         'JSON5',
         'HTTP',
         'CLI',
+        'CSP',
         'SFC',
         'PHP',
         'SSR',

docs/.vitepress/config.js

@@ -170,7 +170,7 @@ const config = {
                 },
                 {
                   text: 'Optimaization',
-                  link: '/advanced/optimaization',
+                  link: '/advanced/optimization',
                 }
               ]
             },

docs/advanced/optimization.md

@@ -7,6 +7,65 @@ You can pre-translation with vue-i18n-extensions.
 
 About how to usage, see [here](https://github.com/intlify/vue-i18n-extensions).
 
+## Improve performance and reduce bundle size with runtime build only
+
+As described in "[installation](installation##from-cdn-or-without-a-bundler)" section, Vue I18n offer the following two built ES modules for Bundler.
+
+- message compiler + runtime: **`vue-i18n.esm-bundler.js`**
+- runtime only: **`vue-i18n.runtime.esm-bundler.js`**
+
+For bundler, it’s configured to bundle `vue-i18n.esm-bundler.js` by default. If you want to reduce the bundle size further, you can configure the bundler to use `vue-i18n.runtime.esm-bundler.js`, which is runtime only.
+
+The use of this ES Module means that **all locale messages have to pre-compile to Message functions**.
+
+:::danger NOTE
+In the [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) environment, `vue-i18n.esm-bundler.js` does not work with compiler due to policy, so you need to use `vue-i18n.runtime.esm-bundler.js` in that environment as well.
+:::
+
+### webpack
+
+In webpack, use `resolve.alias` as below:
+
+```js
+module.exports = {
+  // ...
+  resolve: {
+    alias: {
+      'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
+    }
+  },
+  // ...
+}
+```
+
+:::tip NOTE
+For more information about pre-compiling locale messages, see [`@intlify/vue-i18n-loader`](https://github.com/intlify/vue-i18n-loader)
+:::
+
+### rollup
+
+In rollup, use [`@rollup/plugin-alias`](https://github.com/rollup/plugins/tree/master/packages/alias) as below:
+
+```js
+import path from 'path'
+import alias from '@rollup/plugin-alias'
+
+module.exports = {
+  // ...
+  plugins: [
+    alias({
+      entries: {
+        'vue-i18n': path.resolve(__dirname, './node_modules/vue-i18n/dist/vue-i18n.runtime.esm-bundler.js')
+      }
+    })
+  ],
+  // ...
+}
+```
+
+### vite
+
+TODO:
 
 ## Reduce bundle size with feature build flags
 

docs/installation.md

@@ -109,8 +109,16 @@ Global builds are not [UMD](https://github.com/umdjs/umd) builds. They are built
     - Imported dependencies are also `esm-bundler` builds and will in turn import their dependencies (e.g. `@intlify/message-compiler` imports `@intlify/shared`)
     - This means you **can** install/import these deps individually without ending up with different instances of these dependencies, but you must make sure they all resolve to the same version
   - In-browser locale messages compilation:
-    - **`vue-i18n.runtime.esm-bundler.js` (default)** is runtime only, and requires all locale messages to be pre-compiled. This is the default entry for bundlers (via `module` field in `package.json`) because when using a bundler templates are typically pre-compiled (e.g. in `*.json` files)
-    - **`vue-i18n.esm-bundler.js`**: includes the runtime compiler. Use this if you are using a bundler but still want locale messages compilation (e.g. templates via inline JavaScript strings)
+    - **`vue-i18n.runtime.esm-bundler.js`** is runtime only, and requires all locale messages to be pre-compiled. This is the default entry for bundlers (via `module` field in `package.json`) because when using a bundler templates are typically pre-compiled (e.g. in `*.json` files)
+    - **`vue-i18n.esm-bundler.js` (default)**: includes the runtime compiler. Use this if you are using a bundler but still want locale messages compilation (e.g. templates via inline JavaScript strings)
+
+:::tip NOTE
+If you use `vue-i18n.runtime.esm-bundler.js`, you will need to precompile all locale messages, and you can do that with `.json` (`.json5`) or `.yaml`, i18n custom blocks to manage i18n resources. Therefore, you can be going to pre-compile all locale messages with bundler and the following loader / plugin.
+
+- [`@intlify/vue-i18n-loader`](https://github.com/intlify/vue-i18n-loader)
+- [`@intlify/rollup-plugin-vue-i18n`](https://github.com/intlify/rollup-plugin-vue-i18n)
+- [`@intlify/vite-plugin-vue-i18n`](https://github.com/intlify/vite-plugin-vue-i18n)
+:::
 
 ### For Node.js (Server-Side)
 

packages/vue-i18n/package.json

@@ -29,7 +29,7 @@
     "dist"
   ],
   "main": "index.js",
-  "module": "dist/vue-i18n.runtime.esm-bundler.js",
+  "module": "dist/vue-i18n.esm-bundler.js",
   "unpkg": "dist/vue-i18n.global.js",
   "jsdelivr": "dist/vue-i18n.global.js",
   "types": "dist/vue-i18n.d.ts",