-
Notifications
You must be signed in to change notification settings - Fork 375
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
4 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 = {} | ||
|
@@ -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**。 | ||
|
||
## 未来规划 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 = {} | ||
|
@@ -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%**。 | ||
|
||
## 未来规划 | ||
|
||
|