Webpack 這一 JS 模塊打包神器相信大家都不陌生了。由于 VS Code 插件大部分也都是 JS/TS 代碼 + 依賴庫的形式，因此也可以使用 Webpack 打包，優(yōu)化性能。

經(jīng)過實測，經(jīng)過 Webpack 打包優(yōu)化后的插件，其加載耗時可縮短幾倍甚至數(shù)十倍之多，先來看下效果：

Webpack 優(yōu)化效果

我們以 Java Test Runner 這一插件為例：

在使用 Webpack 后，安裝包的大小由原先的 9.8M 縮減到了 1.9M (在這其中還包含了一些 .jar 文件，真正的 extension.js 在解壓后，僅為 900KB 左右)。

性能上，我們利用 VS Code 自帶的性能檢測工具查看插件加載所用的時間，在我的電腦上，Java Test Runner 的加載時間由原先的 2000ms 縮短到了 200ms 左右，前后相差近 10 倍，可以說效果非常顯著了。

VS Code 插件的開發(fā)者們不妨嘗試一下 Webpack 為自己插件所帶來的驚喜！下面就來聊聊如何將 Webpack 應(yīng)用到自己的插件項目當中吧！

增加 Webpack 相關(guān)依賴庫

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-loaderresolve: {extensions: ['.ts', '.js'],},module: {rules: [{test: /.ts$/,exclude: /node_modules/,use: [{loader: 'ts-loader',}]}]}, } module.exports = config;由于我們會使用打包后的輸出文件作為插件的代碼，因此務(wù)必要記得修改 package.json 中的插件主程序入口，例如："main": "./out/src/extension" 修改為 "main": "./dist/extension"。 不要忘記將 dist 目錄添加到 .gitignore 中。

優(yōu)化開發(fā)體驗

另外，我們可以更新開發(fā)插件時所用的 Launch Configuration 來優(yōu)化開發(fā)體驗：

更新 launch.json

launch.json 文件存放了我們平時調(diào)試插件時的配置信息:

{"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 之前的前置任務(wù)，定義見下文。"preLaunchTask": "npm: watch"}] }

定義 npm:watch 并創(chuàng)建 tasks.json

首先我們在 package.json 中定義 watch 任務(wù)：

"scripts:" {..."watch": "webpack --mode development --watch --info-verbosity verbose"... }

這里我們讓 Webpack 以 watch 模式監(jiān)聽我們對代碼的修改，并實時地對代碼進行打包，并讓其以 verbose 模式輸出更多的打包信息。這是為什么呢？因為我們可以利用這些輸出信息讓 VS Code 知道打包已經(jīng)完成了。

為了做到這一點，我們需要在 task.json 中創(chuàng)建一個監(jiān)聽輸出的任務(wù)，這樣就可讓 VS Code 在 Webpack 完成打包后，自動啟動我們的插件進行調(diào)試：

{"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 的輸出內(nèi)容進行匹配，得知編譯是否完成"beginsPattern": "Compilation w+ starting…","endsPattern": "Compilations+finished"}},"isBackground": true,"presentation": {"reveal": "never"},"group": {"kind": "build","isDefault": true}}]

更新 vscode:prepublish 腳本

vscode:prepublish 是定義在 package.json 中的一段腳本，這段腳本會在生成 VS Code 插件安裝包之前執(zhí)行：

"scripts:" {...// 使用 VSCE 生成插件時的前置腳本，讓 Webpack 打包"vscode:prepublish": "webpack --mode production"... }點此查看更多關(guān)于 vscode:prepublish 的介紹。

更新 .vscodeignore

類似于 .gitignore, .vscodeignore 列出了在生成 VS Code 插件安裝包時，所有不需要放入安裝包中的文件及目錄，這里我們可以增加下列幾項：

• dist/**/*.map：.map 文件僅在本地調(diào)試時需要用到。
• webpack.config.js：Webpack 的配置文件也不需要放入安裝包當中。
• node_modules：由于使用 Webpack 對依賴庫進行了打包，因此我們不再需要將 node_modules 放入安裝包當中了，這將極大縮小安裝包的大小。

最后

VS Code Team 官方提供了使用 Webpack 的樣例代碼，感興趣的讀者可以直接查看。

最后的最后

打一波小小的廣告。我們 Visual Studio China Team 目前致力于提供可與 Eclipse & IntelliJ 媲美的 VS Code Java 開發(fā)體驗，目前已經(jīng)發(fā)布了一些 VS Code 中的 Java 開發(fā)插件。所有項目均為開源項目，歡迎有興趣的讀者下載試用：

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

可以通過提 Issue 的方式給我們提出修改建議，喜歡的話也可以打 ??支持哦！

總結(jié)

以上是生活随笔為你收集整理的vscode安装swift插件_使用 Webpack 优化 VS Code 插件加载性能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。