使用 Webapck 優化 VS Code 插件加載性能

時間 2019-11-06

原文原文鏈接

Webpack 這一 JS 模塊打包神器相信你們都不陌生了。因爲 VS Code 插件大部分也都是 JS/TS 代碼 + 依賴庫的形式，所以也可使用 Webpack 打包，優化性能。javascript

VS Code 插件的開發者們不妨嘗試一下 Webpack 爲本身插件所帶來的驚喜！java

增長 Webpack 相關依賴庫

npm install --save-dev webpack webpack-cli ts-loader
複製代碼

使用 ts-loader 是因爲個人插件是基於 TypeScript 編寫的。node

添加 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"。webpack

不要忘記將 dist 目錄添加到 .gitignore 中。git

優化開發體驗

另外，咱們能夠更新開發插件時所用的 Launch Configuration 來優化開發體驗。github

更新 launch.json

launch.json 文件存放了咱們平時調試插件時的配置信息:web

{
    "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 任務：typescript

"scripts:" {
    ...
    "watch": "webpack --mode development --watch --info-verbosity verbose"
    ...
}
複製代碼

這裏咱們讓 Webpack 以 watch 模式監聽咱們對代碼的修改，並實時地對代碼進行打包，並讓其以 verbose 模式輸出更多的打包信息。這是爲何呢？由於咱們能夠利用這些輸出信息讓 VS Code 知道打包已經完成了。npm

爲了作到這一點，咱們須要在 task.json 中建立一個監聽輸出的任務，這樣就可以讓 VS Code 在 Webpack 完成打包後，自動啓動咱們的插件進行調試：json

{
    "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 放入安裝包當中了，這將極大縮小安裝包的大小。