中国最大网站建设公司,国家企业信用信息系统公示查询官网,wordpress icp涵数,做电商需要什么Webpack 这一 JS 模块打包神器相信大家都不陌生了。由于 VS Code 插件大部分也都是 JS/TS 代码 依赖库的形式#xff0c;因此也可以使用 Webpack 打包#xff0c;优化性能。经过实测#xff0c;经过 Webpack 打包优化后的插件#xff0c;其加载耗时可缩短几倍甚至数十倍之…Webpack 这一 JS 模块打包神器相信大家都不陌生了。由于 VS Code 插件大部分也都是 JS/TS 代码 依赖库的形式因此也可以使用 Webpack 打包优化性能。经过实测经过 Webpack 打包优化后的插件其加载耗时可缩短几倍甚至数十倍之多先来看下效果Webpack 优化效果我们以 Java Test Runner 这一插件为例在使用 Webpack 后安装包的大小由原先的 9.8M 缩减到了 1.9M (在这其中还包含了一些 .jar 文件真正的 extension.js 在解压后仅为 900KB 左右)。性能上我们利用 VS Code 自带的性能检测工具查看插件加载所用的时间在我的电脑上Java Test Runner 的加载时间由原先的 2000ms 缩短到了 200ms 左右前后相差近 10 倍可以说效果非常显著了。VS Code 插件的开发者们不妨尝试一下 Webpack 为自己插件所带来的惊喜下面就来聊聊如何将 Webpack 应用到自己的插件项目当中吧增加 Webpack 相关依赖库npm install --save-dev webpack webpack-cli ts-loader使用 ts-loader 是由于我的插件是基于 TypeScript 编写的。添加 Webpack 配置文件//ts-checkuse strict;const path require(path);/**type {import(webpack).Configuration}*/
const config {// VS Code 插件运行于 Node.js 上下文中// - https://webpack.js.org/configuration/node/target: node,node: {__dirname: false,__filename: false,},// 插件的运行入口。// - https://webpack.js.org/configuration/entry-context/entry: ./src/extension.ts,// 我们将打包后的文件保存于 dist 目录下// - https://webpack.js.org/configuration/output/output: {path: path.resolve(__dirname, dist),filename: extension.js,libraryTarget: commonjs2,devtoolModuleFilenameTemplate: ../[resource-path],},externals: {// vscode模块由 VS Code 运行时提供可以将其排除避免打包文件过大// - https://webpack.js.org/configuration/externals/vscode: commonjs vscode,},devtool: source-map,// 解析 TypeScript 和 JavaScript 文件// - https://github.com/TypeStrong/ts-loaderresolve: {extensions: [.ts, .js],},module: {rules: [{test: /.ts$/,exclude: /node_modules/,use: [{loader: ts-loader,}]}]},
}
module.exports config;由于我们会使用打包后的输出文件作为插件的代码因此务必要记得修改 package.json 中的插件主程序入口例如main: ./out/src/extension 修改为 main: ./dist/extension。 不要忘记将 dist 目录添加到 .gitignore 中。 优化开发体验另外我们可以更新开发插件时所用的 Launch Configuration 来优化开发体验更新 launch.jsonlaunch.json 文件存放了我们平时调试插件时的配置信息:{version: 0.1.0,configurations: [{name: Launch Extension,type: extensionHost,request: launch,runtimeExecutable: ${execPath},args: [--extensionDevelopmentPath${workspaceRoot} ],stopOnEntry: false,sourceMaps: true,// 注意这里需要使用 Webpack 的输出文件路径。outFiles: [ ${workspaceRoot}/dist/**/*.js ],// 在 Launch 之前的前置任务定义见下文。preLaunchTask: npm: watch}]
}定义 npm:watch 并创建 tasks.json首先我们在 package.json 中定义 watch 任务scripts: {...watch: webpack --mode development --watch --info-verbosity verbose...
}这里我们让 Webpack 以 watch 模式监听我们对代码的修改并实时地对代码进行打包并让其以 verbose 模式输出更多的打包信息。这是为什么呢因为我们可以利用这些输出信息让 VS Code 知道打包已经完成了。为了做到这一点我们需要在 task.json 中创建一个监听输出的任务这样就可让 VS Code 在 Webpack 完成打包后自动启动我们的插件进行调试{version: 2.0.0,tasks: [{// 定义 npm: watchtype: npm,script: watch,problemMatcher: {owner: typescript,pattern:[{regexp: [tsl] ERROR,file: 1,location: 2,message: 3}],background: {activeOnStart: true,// 通过对 Webpack 的输出内容进行匹配得知编译是否完成beginsPattern: Compilation w starting…,endsPattern: Compilationsfinished}},isBackground: true,presentation: {reveal: never},group: {kind: build,isDefault: true}}]更新 vscode:prepublish 脚本vscode:prepublish 是定义在 package.json 中的一段脚本这段脚本会在生成 VS Code 插件安装包之前执行scripts: {...// 使用 VSCE 生成插件时的前置脚本让 Webpack 打包vscode:prepublish: webpack --mode production...
}点此查看更多关于 vscode:prepublish 的介绍。 更新 .vscodeignore类似于 .gitignore, .vscodeignore 列出了在生成 VS Code 插件安装包时所有不需要放入安装包中的文件及目录这里我们可以增加下列几项dist/**/*.map.map 文件仅在本地调试时需要用到。webpack.config.jsWebpack 的配置文件也不需要放入安装包当中。 node_modules由于使用 Webpack 对依赖库进行了打包因此我们不再需要将 node_modules 放入安装包当中了这将极大缩小安装包的大小。最后VS Code Team 官方提供了使用 Webpack 的样例代码感兴趣的读者可以直接查看。最后的最后打一波小小的广告。我们 Visual Studio China Team 目前致力于提供可与 Eclipse IntelliJ 媲美的 VS Code Java 开发体验目前已经发布了一些 VS Code 中的 Java 开发插件。所有项目均为开源项目欢迎有兴趣的读者下载试用 Language Support for Java™ by Red Hat Debugger for Java Java Test Runner Maven Project Explorer Java Dependency Viewer可以通过提 Issue 的方式给我们提出修改建议喜欢的话也可以打 ⭐️支持哦
