feat(vue-next): minify webpack bundle size (#3983)

* chore(drive/js): bump up ttypescript version Current ttypescript version not support node v16.20.2, the latest v16 version. It will cause this issue: cevek/ttypescript#150 * fix(hipp-vue-next): correct patchProps types align patchProps types with vue runtime core, but there also have some spec tests to fix * refactor(vue-next): minify generated style code just like fromSsrAstNodes, optimize the output in hippy-vue-css-loader, and make hippy-vue-next-style-parser to compatible with old and new format. * build(example-scripts): remove webpack.NamedModulesPlugin webpack.NamedModulesPlugin was deprecated in v4 and removed in v5. these plugin are default in devlopment mode and should not be configured in production mode, because it will expose file path and increase bundle sizes. https://v4.webpack.js.org/migrate/4/#deprecatedremoved-plugins * chore(examples): update vue3 assets --------- Co-authored-by: zealotchen <92966734+zealotchen0@users.noreply.github.com>
Tencent · Nov 5, 2024 · 5aee7f7 · 5aee7f7
1 parent ed596b7
commit 5aee7f7
Show file tree

Hide file tree

Showing 43 changed files with 116 additions and 86 deletions.
diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.android-vendor.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.android-vendor.js
@@ -18,7 +18,6 @@ module.exports = {
     library: 'hippyReactBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.android.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.android.js
@@ -22,7 +22,6 @@ module.exports = {
     // publicPath: 'https://xxx/hippy/hippyReactDemo/',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.ios-vendor.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.ios-vendor.js
@@ -18,7 +18,6 @@ module.exports = {
     library: 'hippyReactBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.ios.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.ios.js
@@ -22,7 +22,6 @@ module.exports = {
     // publicPath: 'https://xxx/hippy/hippyReactDemo/',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.dev.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.dev.js
@@ -29,7 +29,6 @@ module.exports = {
     globalObject: '(0, eval)("this")',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new HtmlWebpackPlugin({
       inject: true,
       scriptLoading: 'blocking',

diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.js
@@ -17,7 +17,6 @@ module.exports = {
     path: path.resolve(`./dist/${platform}/`),
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web.dev.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web.dev.js
@@ -25,7 +25,6 @@ module.exports = {
     path: path.resolve(`./dist/${platform}/`),
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web.js
@@ -18,7 +18,6 @@ module.exports = {
     path: path.resolve(`./dist/${platform}/`),
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.android-vendor.js b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.android-vendor.js
@@ -31,7 +31,6 @@ module.exports = {
     library: 'hippyVueBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.android.js b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.android.js
@@ -43,7 +43,6 @@ module.exports = {
     // publicPath: 'https://xxx/hippy/hippyVueDemo/',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.ios-vendor.js b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.ios-vendor.js
@@ -31,7 +31,6 @@ module.exports = {
     library: 'hippyVueBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.ios.js b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.ios.js
@@ -43,7 +43,6 @@ module.exports = {
     // publicPath: 'https://xxx/hippy/hippyVueDemo/',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.android-vendor.js b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.android-vendor.js
@@ -19,7 +19,6 @@ module.exports = {
     library: 'hippyVueBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

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
@@ -31,7 +31,6 @@ module.exports = {
     // publicPath: 'https://xxx/hippy/hippyVueNextDemo/',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.ios-vendor.js b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.ios-vendor.js
@@ -19,7 +19,6 @@ module.exports = {
     library: 'hippyVueBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

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
@@ -31,7 +31,6 @@ module.exports = {
     // publicPath: 'https://xxx/hippy/hippyVueNextDemo/',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/...r/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.android.vendor.js b/...r/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.android.vendor.js
@@ -19,7 +19,6 @@ module.exports = {
     library: 'hippyVueBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.base.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.base.js
@@ -41,7 +41,6 @@ exports.getWebpackSsrBaseConfig = function (platform, env) {
       // publicPath: 'https://xxx/hippy/hippyVueNextDemo/',
     },
     plugins: [
-      new webpack.NamedModulesPlugin(),
       new webpack.DefinePlugin({
         'process.env': {
           NODE_ENV: JSON.stringify(env),

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js
@@ -63,7 +63,6 @@ module.exports = {
     globalObject: '(0, eval)("this")',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify('development'),

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.ios.vendor.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.ios.vendor.js
@@ -19,7 +19,6 @@ module.exports = {
     library: 'hippyVueBase',
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
       __PLATFORM__: JSON.stringify(platform),

diff --git a/driver/js/package-lock.json b/driver/js/package-lock.json
diff --git a/driver/js/package.json b/driver/js/package.json
@@ -61,6 +61,7 @@
     "module-alias": "^2.2.2",
     "nyc": "^15.1.0",
     "path-to-regexp": "^1.7.0",
+    "postcss-class-prefix": "~0.3.0",
     "react": "^17.0.2",
     "rimraf": "^2.6.3",
     "rollup": "^2.79.1",
@@ -73,12 +74,11 @@
     "trim-newlines": "^3.0.1",
     "ts-jest": "^27.1.2",
     "tslib": "^2.3.1",
-    "ttypescript": "^1.5.13",
+    "ttypescript": "~1.5.15",
     "typescript": "^4.8.3",
     "typescript-transform-paths": "^3.3.1",
     "vue": "^2.6.14",
-    "watch": "^0.13.0",
-    "postcss-class-prefix": "~0.3.0"
+    "watch": "^0.13.0"
   },
   "_moduleAliases": {
     "vue": "node_modules/vue/src/core/index",

diff --git a/driver/js/packages/hippy-vue-css-loader/src/css-loader.ts b/driver/js/packages/hippy-vue-css-loader/src/css-loader.ts
@@ -32,17 +32,14 @@ let sourceId = 0;
 function hippyVueCSSLoader(this: any, source: any) {
   const options = getOptions(this);
   const parsed = parseCSS(source, { source: sourceId });
-
-  const majorNodeVersion = parseInt(process.versions.node.split('.')[0], 10);
-  const hashType = majorNodeVersion >= 17 ? 'md5' : 'md4';
-  const hash = crypto.createHash(hashType);
+  const hash = crypto.createHash('shake256', { outputLength: 3 });
   const contentHash = hash.update(source).digest('hex');
   sourceId += 1;
-  const rulesAst = parsed.stylesheet.rules.filter((n: any) => n.type === 'rule').map((n: any) => ({
-    hash: contentHash,
-    selectors: n.selectors,
-
-    declarations: n.declarations.map((dec: any) => {
+  const rulesAst = parsed.stylesheet.rules.filter((n: any) => n.type === 'rule').map((n: any) => ([
+    contentHash,
+    n.selectors,
+    // filter comment declaration and empty declaration
+    n.declarations.filter(dec => dec.type !== 'comment').map((dec: any) => {
       let { value } = dec;
       const isVariableColor = dec.property?.startsWith('-') && typeof value === 'string'
         && (
@@ -55,18 +52,14 @@ function hippyVueCSSLoader(this: any, source: any) {
       if (dec.property && (dec.property.toLowerCase().indexOf('color') > -1 || isVariableColor)) {
         value = translateColor(value);
       }
-      return {
-        type: dec.type,
-        property: dec.property,
-        value,
-      };
+      return [dec.property, value];
     }),
-  }));
-  const code = `(function() {
-    if (!global['${GLOBAL_STYLE_NAME}']) {
-      global['${GLOBAL_STYLE_NAME}'] = [];
+  ])).filter(rule => rule[2].length > 0);
+  const code = `(function(n) {
+    if (!global[n]) {
+      global[n] = [];
     }
-    global['${GLOBAL_STYLE_NAME}'] = global['${GLOBAL_STYLE_NAME}'].concat(${JSON.stringify(rulesAst)});
+    global[n] = global[n].concat(${JSON.stringify(rulesAst)});
 
     if(module.hot) {
       module.hot.dispose(() => {
@@ -77,7 +70,7 @@ function hippyVueCSSLoader(this: any, source: any) {
         global['${GLOBAL_DISPOSE_STYLE_NAME}'] = global['${GLOBAL_DISPOSE_STYLE_NAME}'].concat('${contentHash}');
       })
     }
-  })()`;
+  })('${GLOBAL_STYLE_NAME}')`;
   return `module.exports=${code}`;
 }
 

diff --git a/driver/js/packages/hippy-vue-next-style-parser/__test__/style-parser/color-parser.test.ts b/driver/js/packages/hippy-vue-next-style-parser/__test__/style-parser/color-parser.test.ts
@@ -42,6 +42,7 @@ describe('style-parser/color-parser.ts', () => {
     expect(translateColor('transparent')).toEqual(0);
     expect(translateColor('blueviolet')).toEqual(4287245282);
     expect(translateColor(4287245282)).toEqual(3808397867);
+    // FIXME custom variable
     expect(translateColor('var(-Bg)')).toEqual('var(-Bg)');
   });
 

diff --git a/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts
@@ -34,6 +34,9 @@ import { SelectorsMap } from './css-selectors-match';
 import { parseSelector } from './parser';
 import { HIPPY_GLOBAL_STYLE_NAME, HIPPY_GLOBAL_DISPOSE_STYLE_NAME } from './';
 
+type Declaration = [property: string, value: string | number];
+export type ASTRule = [hash: string, selectors: string[], declarations: Declaration[]];
+
 // style load hook
 const beforeLoadStyleHook: Function = (declaration: Function): Function => declaration;
 
@@ -70,7 +73,7 @@ function createSimpleSelectorFromAst(ast) {
         ? new AttributeSelector(ast.property, ast.test, ast.value)
         : new AttributeSelector(ast.property);
     default:
-      return null;
+      return new InvalidSelector(new Error('Unknown selector.'));;
   }
 }
 
@@ -125,10 +128,23 @@ function createSelector(sel) {
  * @param beforeLoadStyle
  */
 export function fromAstNodes(
-  astRules: CssAttribute[] = [],
+  astRules: Array<CssAttribute | ASTRule> = [],
   beforeLoadStyle?: Function,
 ): RuleSet[] {
-  return astRules.map((rule) => {
+  const rules = astRules.map(rule => {
+    if (!Array.isArray(rule)) return rule;
+    const [hash, selectors, declarations] = rule as ASTRule;
+    return {
+      hash,
+      selectors,
+      declarations: declarations.map(([property, value]) => ({
+        type: 'declaration',
+        property,
+        value,
+      })),
+    };
+  });
+  return rules.map((rule) => {
     const declarations = rule.declarations
       .filter(isDeclaration)
       // use default hook when there is no hook passed in

diff --git a/driver/js/packages/hippy-vue-next-style-parser/src/style-parser/css-parser.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-parser/css-parser.ts
@@ -135,7 +135,7 @@ const LINEAR_GRADIENT_DIRECTION_MAP = {
 };
 
 // degree unit
-const DEGREE_UNIT = {
+export const DEGREE_UNIT = {
   TURN: 'turn',
   RAD: 'rad',
   DEG: 'deg',