webpack 这一 JS 模块打包神器相信大家都不陌生了. 由于 VS Code 插件大部分也都是 JS/TS 代码 + 依赖库的形式, 因此也可以使用 Webpack 打包, 优化性能.
本文将介绍如果利用 Webpack 大幅提升我们的 VS Code 插件性能.
增加 Webpack 相关依赖库
NPM install --save-dev webpack webpack-cli ts-loader
使用 ts-loader 是由于我的插件是基于 TypeScript 编写的.
添加 Webpack 配置文件
- //@ts-check
- 'use strict';
- const path = require('path');
- /**@type {import('webpack').Configuration}*/
- const config = {
- // VS Code 插件运行于 Node.JS 上下文中
- // -> https://webpack.js.org/configuration/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-loader
- resolve: {
- 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.JSON
launch.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"
- }
- ]
- }
创建 tasks.JSON
这里我们需要对上文中提到的 NPM: watch 这一前置任务进行定义:
- {
- "version": "2.0.0",
- "tasks": [
- {
- "type": "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": "Compilation\\s+finished"
- }
- },
- "isBackground": true,
- "presentation": {
- "reveal": "never"
- },
- "group": {
- "kind": "build",
- "isDefault": true
- }
- }
- ]
更新 vscode:prepublish 脚本
package.JSON 文件:
- "scripts:" {
- ...
- // 使用 VSCE 生成插件时的前置脚本, 让 Webpack 打包
- "vscode:prepublish": "webpack --mode production"
- ...
- }
点此查看更多关于 vscode:prepublish 的介绍.
更新 .vscodeignore
类似于 .gitignore, .vscodeignore 列出了在生成 VS Code 插件安装包时, 所有不需要放入安装包中的文件及目录, 这里我们可以增加下列几项:
dist/**/*.map:.map 文件仅在本地调试时需要用到.
webpack.config.JS:Webpack 的配置文件也不需要放入安装包当中.
node_modules: 由于使用 Webpack 对依赖库进行了打包, 因此我们不再需要将 node_modules 放入安装包当中了, 这将极大缩小安装包的大小.
效果
至此我们就已经大功告成了, 那么使用了 Webpack 究竟能对 VS Code 插件的性能产生多大的影响呢? 我们以 Java Test Runner https://github.com/Microsoft/vscode-java-test 为例:
安装包大小 | 加载时间 | |
---|---|---|
未使用 Webpack | 9.8M | ~2000ms |
使用 Webpack | 1.9M | ~200ms |
在使用 Webpack 后, 安装包的大小由原先的 9.8M 缩减到了 1.9M (在这其中还包含了一些 .jar 文件, 真正的 extension.JS 在解压后, 仅为 900KB 左右).
性能上, 我们利用 VS Code 自带的性能检测工具查看插件加载所用的时间, 在我的电脑上, Java Test Runner https://github.com/Microsoft/vscode-java-test 的加载时间由原先的 2000ms 缩短到了 200ms 左右, 前后相差近 10 倍, 可以说效果非常显著了.
如果你也是 VS Code 插件的开发者, 那就不要犹豫, 让 Webpack 带你的插件起飞吧!
最后
VS Code Team 官方提供了使用 Webpack 的样例代码, 感兴趣的童靴可以直接查看.
最后的最后
打一波小小的广告. 我们 Team 目前致力于一系列 VS Code 中的 Java 开发插件, 所有项目均为开源项目, 欢迎有兴趣的童鞋下载试用:
Language Support for Java™ by Red Hat
- Debugger for Java
- Java Test Runner
- Maven Project Explorer
- Java Dependency Viewer
可以通过提 Issue的方式给我们提出修改建议, 喜欢的话也可以打 支持哦!
来源: https://juejin.im/post/5c29e1b7e51d4535f05a53d4