Skip to content

Commit

Permalink
fix docs link
Browse files Browse the repository at this point in the history
  • Loading branch information
hiyuki committed Nov 16, 2023
1 parent a893de5 commit 43dabe3
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 4 deletions.
4 changes: 2 additions & 2 deletions docs-vuepress/articles/2.9-release-alter.md
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ self.webpackChunkmpx_test_2_8 = require('../bundle.js')

我们对模版代码的生成逻辑和生成产物进行分析,发现 webpack 生产模式的默认配置中,很多配置项并不是体积最优的选项,一个典型的例子在于模块/chunk id:为了保障生成产物的内容稳定,来尽可能提升浏览器的缓存利用率,webpack 默认的模块/chunk id 采用 `deterministic` 模式进行生成,该模式下模块 id 为模块源路径的定长数字 hash,比项目模块总数长 1 位。由于在小程序中代码包按照版本的维度进行全量管理,保证文件局部的内容稳定在小程序环境下无正向意义,这就有了优化空间,我们可以简单将模块/chunk id 的生成逻辑改为数字自增,在主小程序中就能节省出上百 KB 总包体积。

类似的可优化点还存在于 chunk 链接代码和模块包装函数当中,我们在 `@mpxjs/[email protected]` 版本中提供了一个新的配置项 `optimizeSize`,其中整合了一系列模版代码体积优化配置,开启后就能自动优化构建产物中的模版代码体积,在主小程序中,我们开启 `optimizeSize` 后可以减少总包体积约 **540KB**,效果非常显著,下面是上述示例在开启 `optimizeSize` 后的产物对比:
类似的可优化点还存在于 chunk 链接代码和模块包装函数当中,我们在 `@mpxjs/[email protected]` 版本中提供了一个新的配置项 [`optimizeSize`](https://mpxjs.cn/api/compile.html#optimizesize),其中整合了一系列模版代码体积优化配置,开启后就能自动优化构建产物中的模版代码体积,在主小程序中,我们开启 `optimizeSize` 后可以减少总包体积约 **540KB**,效果非常显著,下面是上述示例在开启 `optimizeSize` 后的产物对比:

```js
var g = {}
Expand Down Expand Up @@ -460,7 +460,7 @@ function render(){

除此之外,我们也大幅优化了 render 函数中的数据收集代码,有效地降低了 render 函数的体积占用。

该优化目前没有默认开启,可以通过 `@mpxjs/webpack-plugin` 中的 [`renderOptimizeRules`](https://mpxjs.cn/api/compile.html#renderoptimizerules) 配置项配置生效范围进行开启,
该优化目前没有默认开启,可以通过 `@mpxjs/webpack-plugin` 中的 [`optimizeRenderRules`](https://mpxjs.cn/api/compile.html#optimizerenderrules) 配置项配置生效范围进行开启,
全量开启后在主小程序中实测可节省总包体积约 **1507KB**

## 未来规划
Expand Down
4 changes: 2 additions & 2 deletions docs-vuepress/articles/2.9-release.md
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,7 @@ self.webpackChunkmpx_test_2_8 = require('../bundle.js')

我们对模版代码的生成逻辑和生成产物进行分析,发现 webpack 生产模式的默认配置中,很多配置项并不是体积最优的选项,一个典型的例子在于模块/chunk id:为了保障生成产物的内容稳定,来尽可能提升浏览器的缓存利用率,webpack 默认的模块/chunk id 采用 `deterministic` 模式进行生成,该模式下模块 id 为模块源路径的定长数字 hash,比项目模块总数长 1 位。由于在小程序中代码包按照版本的维度进行全量管理,保证文件局部的内容稳定在小程序环境下无正向意义,这就有了优化空间,我们可以简单将模块/chunk id 的生成逻辑改为数字自增,在主小程序中就能节省出上百 KB 总包体积。

类似的可优化点还存在于 chunk 链接代码和模块包装函数当中,我们在 `@mpxjs/[email protected]` 版本中提供了一个新的配置项 `optimizeSize`,其中整合了一系列模版代码体积优化配置,开启后就能自动优化构建产物中的模版代码体积,在实际业务中,我们开启 `optimizeSize` 后可以减少总包体积约 **1.6%**,效果非常显著,下面是上述示例在开启 `optimizeSize` 后的产物对比:
类似的可优化点还存在于 chunk 链接代码和模块包装函数当中,我们在 `@mpxjs/[email protected]` 版本中提供了一个新的配置项 [`optimizeSize`](https://mpxjs.cn/api/compile.html#optimizesize),其中整合了一系列模版代码体积优化配置,开启后就能自动优化构建产物中的模版代码体积,在实际业务中,我们开启 `optimizeSize` 后可以减少总包体积约 **1.6%**,效果非常显著,下面是上述示例在开启 `optimizeSize` 后的产物对比:

```js
var g = {}
Expand Down Expand Up @@ -461,7 +461,7 @@ function render(){

除此之外,我们也大幅优化了 render 函数中的数据收集代码,有效地降低了 render 函数的体积占用。

该优化目前没有默认开启,可以通过 `@mpxjs/webpack-plugin` 中的 [`renderOptimizeRules`](https://mpxjs.cn/api/compile.html#renderoptimizerules) 配置项配置生效范围进行开启,全量开启后在实际业务中可节省总包体积约 **5%**
该优化目前没有默认开启,可以通过 `@mpxjs/webpack-plugin` 中的 [`optimizeRenderRules`](https://mpxjs.cn/api/compile.html#optimizerenderrules) 配置项配置生效范围进行开启,全量开启后在实际业务中可节省总包体积约 **5%**

## 未来规划

Expand Down

0 comments on commit 43dabe3

Please sign in to comment.