fast-tracker-integration-webpack-plugin v2.0.4
fast-tracker-integration-webpack-plugin
天眼探针集成插件
插件功能
fast-tracker-integration-webpack-plugin是基于webpack4开发的webpack插件，为天眼离线应用、mpvue小程序集成天眼探针使用
项目引入插件后,需要配置好 产品编码 product_code、应用编码 app_code、环境编码 env_code, file_path_arr 应用入口html相对于输出目录的位置 在天眼管理中心修改探针配置后,每次构建都将会从天眼拉取对应环境的探针代码,并将探针文件输出到项目中(offline与mpvue小程序),online应用为插入标签
开启update_sourcemap参数后
为天眼探针定位上报异常在源代码中的确切位置提供source文件和map文件
在webpack中作为插件使用,需要开启项目的sourceMap文件生成选项，插件会根据输出目录递归搜索 .js文件和.js.map文件 .css.map文件
其中，.js文件和.js.map文件会上传到天眼 .css.map文件不会上传，根据插件配置项 可以决定插件是否删除输出目录中的 .js.map文件和.css.map文件
提示：避免在开发环境开启update_sourcemap功能,否则由于上传文件可能导致热加载时间过长，在生产环境再启用该插件
配置项
npm i fast-tracker-integration-webpack-plugin -D在webpack中
import FastTrackerIntegrationWebpackPlugin from 'fast-tracker-integration-webpack-plugin';
import path from 'path';
plugins: [
new FastTrackerIntegrationWebpackPlugin({
// 公共参数
product_code: your product_code,
app_code: your app_code,
// 探针集成相关参数
integration_tracker: 'offline',
env_code: your env_code,
file_path_arr: ['index.html', 'aaa/index.html'], // 输出目录的入口html文件 例如 dist/index.html 直接填充index.html(当前如果是mpvue小程序时,需要填输出目录的绝对路径(path.join(__dirname, '../dist/app.js')))
// sourcemap上传相关参数
update_sourcemap: true,
app_key: your app_key,
is_delete_source_map: true,
})
]在umi中 config.js
import FastTrackerIntegrationWebpackPlugin from 'fast-tracker-integration-webpack-plugin';
import path from 'path';
export default {
chainWebpack: config => { // 使用fast-tracker-integration-webpack-plugin插件
config
.plugin('fast-tracker-integration-webpack-plugin')
.use(new FastTrackerIntegrationWebpackPlugin({
// 公共参数
product_code: your product_code,
app_code: your app_code,
// 探针集成相关参数
integration_tracker: 'offline',
env_code: your env_code,
file_path_arr: ['index.html', 'aaa/index.html'], // 输出目录的入口html文件 例如 dist/index.html 直接填充index.html(当前如果是mpvue小程序时,需要填输出目录的绝对路径(path.join(__dirname, '../dist/app.js')))
// sourcemap上传相关参数
update_sourcemap: true,
app_key: your app_key,
is_delete_source_map: true,
}))
},
plugins: [
// ref: https://umijs.org/plugin/umi-plugin-react.html
['umi-plugin-react', {
...
}]
],
hash: true,
targets: {
ie: 9
},
// 路由配置
routes: pageRoutes,
// ANTD主题配色
theme: {
},
// Webpack Configuration
proxy: {
}
}上传时间
上传时间不定，根据当前网络状况决定，oss仓库存在的文件不会上传(根据文件路径与名称区分,请开启文件名hash)。
注意事项
配置devtool生成sourcemap文件时,如果您的项目需要保留sourcemap文件,那么推荐使用 'source-map' 模式,该模式为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。 如果您的项目不需要保留生产的sourcemap文件,推荐使用 'hidden-source-map' 模式,与source-map 相同，但不会为 bundle 添加引用注释。
如果您的项目将css、less、scss文件打包入您的js文件时，请在相关loader中关闭您css、less、scss相关文件的sourcemap生成配置。以防止生成的map文件一并打包入您的js文件中，导致js文件大小超过预期。
例：
{
loader: 'style-loader',
options: {
sourceMap: false
}
}- 由于node对进程的内存分配有默认设置,32位系统 node默认分配内存 0.7g左右,64位系统默认分配内存1.4g左右, 如果项目复杂,在开启souremap生成选项时,打包的时候,可能出现内存不足导致打包失败的情况
例:
<--- Last few GCs --->
[70041:0x103800000] 112100 ms: Mark-sweep 1049.8 (1273.7) -> 1049.7 (1214.2) MB, 427.1 / 0.0 ms (average mu = 0.618, current mu = 0.000) last resort GC in old space requested
[70041:0x103800000] 112510 ms: Mark-sweep 1049.7 (1214.2) -> 1049.7 (1192.2) MB, 410.3 / 0.0 ms (average mu = 0.447, current mu = 0.000) last resort GC in old space requested
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 0x36295d35be3d]
Security context: 0x0280a0d9e6e1 <JSObject>
1: byteLength(aka byteLength) [0x280057866f1] [buffer.js:531] [bytecode=0x280f3e290c1 offset=204](this=0x0280cf7826f1 <undefined>,string=0x028037c8a291 <Very long string[190258200]>,encoding=0x0280a0dbd819 <String[4]: utf8>)
2: arguments adaptor frame: 3->2
3: fromString(aka fromString) [0x2800579d2d9] [buffer.js:342] [bytecode=0x280f3e278e1 offs...解决方案:
配置打包命令时,修改node进程占用内存的大小 --max-old-space-size
例:
package.json
"scripts": {
"build": " node --max-old-space-size=4096 ./scripts/build.js",
},