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

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 上下文中
    // :book: -> https://webpack.js.org/configuration/node/
    node: {
        __dirname: false,
        __filename: false,
    },
    // 插件的运行入口。
    // :book: -> https://webpack.js.org/configuration/entry-context/
    entry: './src/extension.ts',
    // 我们将打包后的文件保存于 'dist' 目录下
    // :book: -> https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'extension.js',
        libraryTarget: "commonjs2",
        devtoolModuleFilenameTemplate: "../[resource-path]",
    },
    externals: {
        // 'vscode'模块由 VS Code 运行时提供，可以将其排除避免打包文件过大
        // :book: -> https://webpack.js.org/configuration/externals/
        vscode: "commonjs vscode",
    },
    devtool: 'source-map',
    // 解析 TypeScript 和 JavaScript 文件
    // :book: -> 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 为例：

在使用 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 开发插件，所有项目均为开源项目，欢迎有兴趣的童鞋下载试用：

• :package: Language Support for Java™ by Red Hat
• :package: Debugger for Java
• :package: Java Test Runner
• :package: Maven Project Explorer
• :package: Java Dependency Viewer

可以通过提 Issue:raising_hand:的方式给我们提出修改建议，喜欢的话也可以打 :star:️支持哦！