支持 SNC 分割

Author: vv314

config/default.js

@@ -18,7 +18,9 @@ module.exports = {
     // 默认启用 runtime，仅允许 vue 文件内的模板
     vueRuntimeOnly: true,
     // @TODO 移除 console
-    dropConsole: false
+    dropConsole: false,
+    // 分离 SNC
+    splitSNC: false
   },
   ciConfig: {},
   entry: 'src/view/*/index.js',

libs/hybrid/SinaHybridPlugin.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const devalue = require('devalue')
 const chalk = require('chalk')
 const ConcatSource = require('webpack-sources/lib/ConcatSource')
-const { rootPath } = require('../../libs/utils')
+const { rootPath, isInstalled } = require('../../libs/utils')
 
 /**
  * 生成版本文件
@@ -14,6 +14,7 @@ class SinaHybridPlugin {
   constructor(options) {
     this.options = options
     this.version = process.env.npm_package_version
+    this.shouldSNCHoisting = options.splitSNC
     this.rewriteField = genRewriteFn([
       rootPath('public/manifest.json'),
       rootPath(`src/view/${this.options.entry}/public/manifest.json`)
@@ -35,6 +36,7 @@ class SinaHybridPlugin {
     compiler.plugin('compilation', compilation => {
       const maraCtx = compiler['maraContext'] || {}
 
+      this.splitSNC(compilation)
       this.genVersionFile(compilation)
       this.updateManifestVersion()
       this.injectDataSource(compilation, maraCtx.dataSource)
@@ -66,6 +68,31 @@ class SinaHybridPlugin {
     this.rewriteField('dataSource', dataSource)
   }
 
+  splitSNC(compilation) {
+    if (!this.shouldSNCHoisting) return
+
+    compilation.plugin(
+      'html-webpack-plugin-alter-asset-tags',
+      (assets, callback) => {
+        const idx = assets.body.findIndex(tag => {
+          return tag.attributes.src.indexOf('__UNI_SNC__.') > -1
+        })
+
+        if (idx < 0) return callback(null, assets)
+
+        assets.head.push({
+          tagName: 'script',
+          attributes: { src: assets.body[idx].attributes.src },
+          closeTag: true
+        })
+
+        assets.body.splice(idx, 1)
+
+        callback(null, assets)
+      }
+    )
+  }
+
   prependEntryCode(compilation, code) {
     const assets = compilation.assets
     const concatSource = (assets, fileName, code) => {

libs/hybrid/appSNC.js

@@ -0,0 +1,5 @@
+// 包名后添加任意参数，防止被 externals 排除
+// @TODO 使用 rollup 预编译，读取 lib 目录
+import appSNC from '@mfelibs/universal-framework?uni=1'
+
+window['__UNI_SNC__'] = appSNC

libs/hybrid/index.js

@@ -4,10 +4,12 @@ const hybridDevPublish = require('./HybridDevPublish')
 const hybridTestPublish = require('./hybridTestPublish')
 const SinaHybridPlugin = require('./SinaHybridPlugin')
 const HybridCommonPlugin = require('./HybridCommonPlugin')
+const splitSNC = require('./splitSNC')
 
 module.exports = {
   hybridDevPublish,
   hybridTestPublish,
   SinaHybridPlugin,
-  HybridCommonPlugin
+  HybridCommonPlugin,
+  splitSNC
 }

libs/hybrid/splitSNC.js

@@ -0,0 +1,43 @@
+const path = require('path')
+const { getEntries } = require('../utils')
+const UNI_SNC = '__UNI_SNC__'
+const pkgName = '@mfelibs/universal-framework'
+
+function splitSNC(entryGlob) {
+  const sncPath = require.resolve(pkgName)
+  const isSNCEntry = (context, request) => {
+    const apiPath = path.join(path.dirname(sncPath), '/libs/apis')
+
+    if (!context.includes(apiPath)) return false
+
+    const filePath = path.resolve(context, request)
+
+    return sncPath.includes(filePath)
+  }
+
+  const entryConf = getEntries(entryGlob)
+  // 从主入口中排除 SNC 依赖
+  const externals = [
+    {
+      [pkgName]: UNI_SNC
+    },
+    (context, request, callback) => {
+      // 排除 universal 内部 apis 对自身的引用
+      if (isSNCEntry(context, request)) {
+        return callback(null, UNI_SNC)
+      }
+
+      callback()
+    }
+  ]
+
+  // 拆分 SNC，由于依赖 Promise，因此一并添加 polyfills
+  entryConf[UNI_SNC] = [
+    require.resolve('../../webpack/polyfills'),
+    require.resolve('./appSNC')
+  ]
+
+  return { entry: entryConf, externals }
+}
+
+module.exports = splitSNC

libs/utils.js

@@ -262,6 +262,15 @@ function styleLoaders(options) {
   return output
 }
 
+function isInstalled(name) {
+  try {
+    require.resolve(name)
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
 module.exports = {
   styleLoaders,
   cssLoaders,
@@ -278,6 +287,7 @@ module.exports = {
   pubDate,
   banner,
   isNotEmptyArray,
+  isInstalled,
   nodeModulesRegExp,
   ensureSlash,
   camelName,

package.json

@@ -33,7 +33,7 @@
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-react-app": "^3.1.1",
     "babel-runtime": "^6.26.0",
-    "browserslist": "^4.6.3",
+    "browserslist": "^4.6.6",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "chalk": "^2.4.1",
     "copy-webpack-plugin-hash": "^5.1.4",
@@ -75,7 +75,7 @@
     "postcss-import": "^12.0.0",
     "postcss-loader": "^3.0.0",
     "postcss-mpvue-wxss": "^1.0.0",
-    "postcss-preset-env": "^6.6.0",
+    "postcss-preset-env": "^6.7.0",
     "postcss-url": "^8.0.0",
     "prerender-html-plugin": "0.0.33",
     "promise-polyfill": "^8.1.0",

webpack/webpack.base.conf.js

@@ -3,7 +3,8 @@
 const path = require('path')
 const config = require('../config')
 const vueLoaderConfig = require('./loaders/vue-loader.conf')
-const { getEntries } = require('../libs/utils')
+const { getEntries, isInstalled } = require('../libs/utils')
+const { splitSNC } = require('../libs/hybrid')
 const paths = config.paths
 const tsImportPluginFactory = require('ts-import-plugin')
 
@@ -31,10 +32,31 @@ module.exports = function(entry, type) {
   const ASSETS = isLib ? '' : config.assetsDir
   const entryGlob = `src/view/${entry}/index.@(ts|js)`
   const { vueRuntimeOnly } = config.compiler
+  const isHybridMode = config.build.env.raw['jsbridgeBuildType'] === 'app'
+  const isDevOrBuildCmd = type === 'dev' || type === 'build'
+  let entryConf = {}
+  let externals = []
 
-  return {
+  const shouldSNCHoisting =
+    isDevOrBuildCmd &&
+    isHybridMode &&
+    config.compiler.splitSNC &&
+    isInstalled('@mfelibs/universal-framework')
+
+  // hybrid SDK 提升，以尽快建立 jsbridge
+  if (shouldSNCHoisting) {
+    const sncConf = splitSNC(entryGlob)
+
+    // 使用拆分后的 entry 配置
+    entryConf = sncConf.entry
+    externals.push(...sncConf.externals)
+  } else {
+    entryConf = getEntries(entryGlob, require.resolve('./polyfills'))
+  }
+
+  const baseConfig = {
     // dev, build 环境依赖 base.entry，务必提供
-    entry: getEntries(entryGlob, require.resolve('./polyfills')),
+    entry: entryConf,
     output: {
       path: paths.dist,
       // 统一使用 POSIX 风格拼接路径
@@ -175,6 +197,8 @@ module.exports = function(entry, type) {
         }
       ]
     },
+    plugins: [],
+    externals: externals,
     // Some libraries import Node modules but don't use them in the browser.
     // Tell Webpack to provide empty mocks for them so importing them works.
     node: {
@@ -188,4 +212,18 @@ module.exports = function(entry, type) {
       child_process: 'empty'
     }
   }
+
+  if (isHybridMode) {
+    const { SinaHybridPlugin } = require('../libs/hybrid')
+
+    // 确保在 copy Files 之前
+    baseConfig.plugins.push(
+      new SinaHybridPlugin({
+        entry: entry,
+        splitSNC: shouldSNCHoisting
+      })
+    )
+  }
+
+  return baseConfig
 }

webpack/webpack.dev.conf.js

@@ -23,7 +23,7 @@ function parseChunks(entry) {
 }
 
 module.exports = function({ entry }) {
-  const baseWebpackConfig = require('./webpack.base.conf')(entry)
+  const baseWebpackConfig = require('./webpack.base.conf')(entry, 'dev')
   const pagePublicDir = rootPath(`${config.paths.page}/${entry}/public`)
   const chunksEntry = parseChunks(entry)
   const { transformer, formatter } = require('../libs/resolveLoaderError')

webpack/webpack.prod.conf.js

@@ -14,7 +14,7 @@ const moduleDependency = require('sinamfe-webpack-module_dependency')
 const { HybridCommonPlugin } = require('../libs/hybrid')
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin')
-const { SinaHybridPlugin } = require('../libs/hybrid')
+// const { SinaHybridPlugin } = require('../libs/hybrid')
 
 const config = require('../config')
 const { banner, rootPath, getChunks, isObject } = require('../libs/utils')
@@ -30,7 +30,7 @@ const shouldUseSourceMap = !!maraConf.sourceMap
  */
 module.exports = function({ entry, cmd }) {
   const distPageDir = `${config.paths.dist}/${entry}`
-  const baseWebpackConfig = require('./webpack.base.conf')(entry)
+  const baseWebpackConfig = require('./webpack.base.conf')(entry, 'build')
   const hasHtml = fs.existsSync(`${config.paths.page}/${entry}/index.html`)
   const chunksEntry = getChunks(`src/view/${entry}/index.*.js`)
   const debugLabel = config.debug ? '.debug' : ''
@@ -157,7 +157,7 @@ module.exports = function({ entry, cmd }) {
 
       // 【争议】：lib 模式禁用依赖分析?
       // 确保在 copy Files 之前
-      maraConf.hybrid && new SinaHybridPlugin({ entry }),
+      // maraConf.hybrid && new SinaHybridPlugin({ entry }),
       new moduleDependency({
         emitError: config.compiler.checkDuplicatePackage !== false
       }),