From 70fd38b707d959361e1498f9ac820a5333359311 Mon Sep 17 00:00:00 2001 From: birdguo Date: Mon, 18 Mar 2024 21:46:30 +0800 Subject: [PATCH] fix(vue-next): fix js release bundle size too big issue (#3779) --- docs/api/hippy-vue/vue3.md | 13 +++++++++++++ .../scripts/hippy-webpack.android.js | 2 ++ .../scripts/hippy-webpack.ios.js | 2 ++ .../scripts/hippy-webpack.web-renderer.js | 2 ++ 4 files changed, 19 insertions(+) diff --git a/docs/api/hippy-vue/vue3.md b/docs/api/hippy-vue/vue3.md index f16edd989bd..4443e269301 100644 --- a/docs/api/hippy-vue/vue3.md +++ b/docs/api/hippy-vue/vue3.md @@ -409,6 +409,19 @@ webpack-plugin.ts 封装了 SSR 渲染所需 Hippy App 的初始化逻辑 因 SSR 的渲染方式和生命周期等与客户端渲染方式有一些差异，因此需要在代码编写过程中注意，这里可以参考[Vue官方的SSR指引](https://cn.vuejs.org/guide/scaling-up/ssr.html#writing-ssr-friendly-code) +- Vue 构建结果体积问题 + + 因为 @hippy/vue-next 项目使用的是已编译的 Vue 组件，所以并不依赖于 Vue 的编译器，而默认的 webpack 打包会使用完整版本的 Vue 进行构建，会将不需要的编译器也打包在构建产物中，因此需要指定使用运行时版本的 Vue 产物 + + ```javascript + // scripts/hippy-webpack.android.js + const aliases = { + // ...other options + // hippy 仅需要运行时的 Vue，在这里指定 + vue$: 'vue/dist/vue.runtime.esm-bundler.js', + }; + ``` + # 示例 更多使用请参考 [示例项目](https://github.com/Tencent/Hippy/tree/main/examples/hippy-vue-next-demo). diff --git a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.android.js b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.android.js index e137c500c08..c6188b5a3ca 100644 --- a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.android.js +++ b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.android.js @@ -142,6 +142,8 @@ module.exports = { alias: (() => { const aliases = { src: path.resolve('./src'), + // hippy 仅需要运行时的 Vue，在这里指定 + vue$: 'vue/dist/vue.runtime.esm-bundler.js', }; // If @vue/runtime-core was built exist in packages directory then make an alias diff --git a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.ios.js b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.ios.js index 2adeed998d3..a8154d41539 100644 --- a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.ios.js +++ b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.ios.js @@ -142,6 +142,8 @@ module.exports = { alias: (() => { const aliases = { src: path.resolve('./src'), + // hippy 仅需要运行时的 Vue，在这里指定 + vue$: 'vue/dist/vue.runtime.esm-bundler.js', }; // If @vue/runtime-core was built exist in packages directory then make an alias diff --git a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.js b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.js index 4e2636dfde5..1caed7f57c1 100644 --- a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.js +++ b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.js @@ -138,6 +138,8 @@ module.exports = { alias: (() => { const aliases = { src: path.resolve('./src'), + // hippy 仅需要运行时的 Vue，在这里指定 + vue$: 'vue/dist/vue.runtime.esm-bundler.js', }; // If @vue/runtime-core was built exist in packages directory then make an alias