使用 Webapck 优化 VS Code 插件加载性能

Webpack 这一 JS 模块打包神器相信你们都不陌生了。因为 VS Code 插件大部分也都是 JS/TS 代码 + 依赖库的形式，所以也可使用 Webpack 打包，优化性能。

VS Code 插件的开发者们不妨尝试一下 Webpack 为本身插件所带来的惊喜！

增长 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/
    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-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"
        }
    ]
}
复制代码

定义 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: watch
            "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 脚本

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.js：Webpack 的配置文件也不须要放入安装包当中。
• node_modules：因为使用 Webpack 对依赖库进行了打包，所以咱们再也不须要将 node_modules 放入安装包当中了，这将极大缩小安装包的大小。

效果

至此咱们就已经大功告成了，那么使用了 Webpack 究竟能对 VS Code 插件的性能产生多大的影响呢？咱们以 Java Test Runner 为例：

	安装包大小	加载时间
未使用 Webpack	9.8M	~2000ms
使用 Webpack	1.9M	~200ms

在使用 Webpack 后，安装包的大小由原先的 9.8M 缩减到了 1.9M (在这其中还包含了一些 .jar 文件，真正的 extension.js 在解压后，仅为 900KB 左右)。

性能上，咱们利用 VS Code 自带的性能检测工具查看插件加载所用的时间，在个人电脑上，Java Test Runner 的加载时间由原先的 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🙋的方式给咱们提出修改建议，喜欢的话也能够打 ⭐️支持哦！