支持 extractCommon & extractVendor #2

liaoyu · 2021-04-20T11:17:25Z

参考：
https://webpack.js.org/plugins/split-chunks-plugin/
https://webpack.js.org/concepts/entry-points/#separate-app-and-vendor-entries

extractVendor
- BREAKING CHANGE: extractVendor 不再支持指定 entry name，请指定固定依赖的包名数组，例如 ["react", "react-dom"] （改动原因是 webpack 5 不再支持通过指定 entry 来抽取公共依赖）
- 行为是将所指定的依赖在 node_modules 的包都打包进 vendor，指定 true 时则抽取所有 node_modules 下的依赖包
extractCommon
- 2 个 entry 以上时抽取公共依赖

以 portal-platform 为例，在不改动配置时输出如下：

手动增加一个 entry 共同开启：

nighca · 2021-04-21T02:19:30Z

src/webpack/transform.ts

+  config: Configuration, cacheGroups: SplitChunksCacheGroups
+): Configuration {
+  return produce(config, newConfig => {
+    newConfig.optimization = newConfig.optimization || {}


NIP: 最近发现可以写成

newConfig.optimization ||= {}

或者

newConfig.optimization ??= {}

这俩写法都已经 stage 4 了好像，我们用的 TS 版本应该也支持的

done 🐮 🍺

nighca · 2021-04-21T02:20:38Z

src/webpack/transform.ts

@@ -458,3 +458,49 @@ function makeBabelLoaderOptions(
    nextOptions.sourceType = nextOptions.sourceType || 'unambiguous'
  })
 }
+
+export interface SplitChunksCacheGroup {


这个是从哪里拷的吗？webpack 本身没有定义或者暴露这个类型？

这个是从 webpack 里拷贝出来，它没有将这些类型导出

nighca · 2021-04-21T02:27:12Z

src/webpack/index.ts

  config = addTransforms(config, buildConfig)

  const htmlPlugins = Object.entries(buildConfig.pages).map(([ name, { template, entries } ]) => {
    return new HtmlPlugin({
      template: abs(template),
      filename: getPageFilename(name),
-      chunks: entries
+      chunks: [...baseChunks, ...entries],
+      chunksSortMode: 'manual'


指定 manual 有什么说法吗？

测试发现不指定顺序有可能 vendor.js 会在 entry.js 后面

nighca · 2021-04-21T02:30:17Z

src/webpack/index.ts

+
+    if (extractVendor) {
+      if (typeof extractVendor === 'string') {
+        logger.warn('BREAKING CHANGE: The type of extractVendor no longer a string, please use an array, like ["react", "react-dom"]')


NIP: 这个像是在暗示，原本的 'vendor' 应该改成 ['vendor']..

这边并不是一个简单的 string -> string[] 的变化，而是调整了需要指定的信息，建议这边直接让他看最新的 extractVendor 的文档就好

nighca · 2021-04-21T02:37:06Z

src/webpack/index.ts

+        logger.warn('BREAKING CHANGE: The type of extractVendor no longer a string, please use an array, like ["react", "react-dom"]')
+      } else {
+        baseChunks.push(chunks.vendor)
+        // extractVendor 传空数组时，默认将依赖的 node_modules 都打包进 vendor


['react'] -> 抽取 react
['react', 'react-dom'] -> 抽取 react & react-dom
[] -> 抽取所有第三方依赖

感觉不太符合直觉？

如果确实有抽取所有第三方依赖的需求，我觉得 extractVendor: true 比 extractVendor: [] 更符合直觉一点？

done，增加了 boolean 的类型，改成 extractVendor 传空数组不进行 vendor 抽取

nighca · 2021-04-21T03:08:25Z

src/webpack/index.ts

+      } else {
+        baseChunks.push(chunks.vendor)
+        // extractVendor 传空数组时，默认将依赖的 node_modules 都打包进 vendor
+        const vendorModules = extractVendor.length > 0 ? `(${extractVendor.join('|')})[\\\\/]` : ''


这边的内容会被拿去构造正则，值需不需要做正则的 escape？即，第三方依赖的包名里有没有可能有正则的特殊字符？

NIP: 正则如果容易出错的话，也可以考虑用 test function

改成 test function 来处理了

nighca · 2021-04-21T03:24:14Z

src/webpack/index.ts

@@ -63,13 +64,50 @@ export async function getConfig(): Promise<Configuration> {
    }
  }

+  const baseChunks: string[] = []
+
+  if (getEnv() === Env.Prod) {


getConfig 函数有点长了，这一块是相对独立的一块内容，建议拆到旁边单独的函数里，这边调用之？

huangbinjie · 2021-04-21T05:47:14Z

src/webpack/index.ts

+
+    if (extractVendor) {
+      if (typeof extractVendor === 'string') {
+        logger.warn('BREAKING CHANGE: extractVendor 不再支持指定 entry name，请指定固定依赖的包名数组，例如 ["react", "react-dom"]')


发 2.0 还要温和吗？

不是直接不处理或者报错吗。。
然后有个 immigration 的东西告诉我们怎么从 1 迁移到 2

哦原来你说的真的是”温和“..

我觉得报错也是可以的

然后有个 immigration 的东西告诉我们怎么从 1 迁移到 2

这个就是我提到的，让使用方来看最新文档就好

这里改成抛 Error 并提示查看帮助文档了

nighca · 2021-04-21T06:51:50Z

对了，有几个点测试的时候需要稍微注意下：

vendor & common 对应的 css，是不是像默认 css 一样，是在比 Javascript 更早的时候加载的（插在 <head> 里）
依赖内容不变，修改 src 内容，构建后生成的 vendor chunk，其内容及文件名（hash）应该不变
新增或修改别的依赖内容，但不改变 extractVendor 对应的依赖，构建后生成的 vendor chunk，其内容及文件名（hash）应该不变

nighca · 2021-04-22T12:40:01Z

src/webpack/transform.ts

+          const resource = module.resource
+          if (!resource) return false
+
+          if (typeof extractVendor === 'boolean') {


extractVendor === false 的话也走这个分支吗？

不会的，前面还有一个 if (extractVendor) {} 做前置判断才会走到这里边

nighca · 2021-04-22T12:40:59Z

src/webpack/transform.ts

+          return extractVendor.findIndex(packageName => {
+            return resource.includes(path.join('node_modules', packageName))
+          }) !== -1


NIP:

Suggested change

return extractVendor.findIndex(packageName => {

return resource.includes(path.join('node_modules', packageName))

}) !== -1

return extractVendor.some(packageName => {

return resource.includes(path.join('node_modules', packageName))

})

nighca · 2021-04-22T12:44:12Z

src/webpack/transform.ts

+          }
+
+          return extractVendor.findIndex(packageName => {
+            return resource.includes(path.join('node_modules', packageName))


考虑取名 xxx_node_modules 的自定义目录，node_modules 前面也带个杠的话严谨一点？上边的

return resource.includes('node_modules')

同理

大佬严谨，我前后都加一下

liaoyu · 2021-04-23T03:32:45Z

对了，有几个点测试的时候需要稍微注意下：

vendor & common 对应的 css，是不是像默认 css 一样，是在比 Javascript 更早的时候加载的（插在 <head> 里）

依赖内容不变，修改 src 内容，构建后生成的 vendor chunk，其内容及文件名（hash）应该不变

新增或修改别的依赖内容，但不改变 extractVendor 对应的依赖，构建后生成的 vendor chunk，其内容及文件名（hash）应该不变

这 3 个场景已经验证符合预期

nighca

🌋

* sv * without svg * use file & svgr for svg * typo * samples change * update config * dev deps & script * optimize svg support * drop support for ENV_VARIABLES_FILE * sv * update samples * debug devServer route fallback & module resolution * enable ts-loader allowTsInNodeModules * update details * update README * extract css * optimization.addPolyfill * use asset module instead of loaders * optimize deps * update TODO * beta.1 * throw error in logLifecycle * beta.2 * upload * beta.3 * beta.4 * disable svgo for svg transform * beta.5 * 支持 extractCommon & extractVendor (#2) * extractCommon & extractVendor * default vendors * fix extractVendor * remove build-config.md * fix review * fix extractVendor * tsconfig 配置调整 (#4) * open esModuleInterop * target to es6 * 调整默认的目标浏览器 (#3) * adjust default target browsers * use svgr for qiniu portal * npm audit * filter ts-loader transpileOnly warning * beta.7 * 新增 analyze 命令以分析 bundle 依赖 (qiniu#132) * add analyz * add analyze command * fix self review * fix review * 修复 CI (qiniu#134) * debug build-sample.sh * debug samples for CI * update browserslist db * update circle ci node versions * serve 时监测配置文件变更 (qiniu#133) * watch build config file change * typo * watch for tsconfig.json * remove useless code * comment * typo * 修复样式修改 hot reload 不生效的问题 (qiniu#135) * fix css hot reload * optimize env logic * beta.8 * Upgrade typescript 4.1.x (qiniu#137) * use typescript 4.1.x * beta.9 * log pretty (qiniu#138) * beta.10 * source map 行为优化 (qiniu#139) * process source map * beta.11 * upgrade ts-loader * typo * use cheap-module-source-map instead of eval-source-map * move webpack-related fns to utils/webpack * build-config 支持 npm package 作为 `extends` 目标 (qiniu#140) * support npm package as extends target * update build-config doc * support file in npm package * beta.12 * 支持 `optimization.compressImage` (qiniu#142) * remove sourcemap from TODO * update build script * specify webpack config target * update comment for getServeConfig * add repository info in package.json * update command prepare & test * optimization.compressImage * update samples * beta.13 * fix dynamic-import (qiniu#143) * beta.14 * fix Typescript moduleResolution (qiniu#144) * beta.15 Co-authored-by: liaoyu <[email protected]>

liaoyu added 3 commits April 20, 2021 19:14

extractCommon & extractVendor

1087809

default vendors

f1f8f6c

fix extractVendor

1d5fbbf

nighca reviewed Apr 21, 2021

View reviewed changes

remove build-config.md

3ee6b49

huangbinjie reviewed Apr 21, 2021

View reviewed changes

fix review

008e77e

nighca reviewed Apr 22, 2021

View reviewed changes

fix extractVendor

5492f1d

nighca approved these changes Apr 23, 2021

View reviewed changes

nighca merged commit 8108530 into nighca:v2 Apr 23, 2021

nighca mentioned this pull request Aug 27, 2021

builder v2 qiniu/builder#131

Merged

支持 extractCommon & extractVendor #2

支持 extractCommon & extractVendor #2

Uh oh!

Conversation

liaoyu commented Apr 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nighca commented Apr 21, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

liaoyu commented Apr 23, 2021

Uh oh!

nighca left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

liaoyu commented Apr 20, 2021 •

edited

Loading