feat: 优化 webpack 打包配置
- 添加自动模式切换(开发/生产) - 启用 Tree Shaking 移除未使用代码 - 加快编译速度(transpileOnly) - 添加打包体积监控 - 自动清理旧文件 - 添加打包优化文档
This commit is contained in:
55
docs/webpack-optimization.md
Normal file
55
docs/webpack-optimization.md
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
# Webpack 打包优化说明
|
||||||
|
|
||||||
|
## 优化内容
|
||||||
|
|
||||||
|
### 1. 自动模式切换
|
||||||
|
- 开发模式:保持源码可读性
|
||||||
|
- 生产模式:自动压缩代码
|
||||||
|
|
||||||
|
### 2. 性能优化
|
||||||
|
- **Tree Shaking**:移除未使用的代码
|
||||||
|
- **transpileOnly**:跳过类型检查,加快编译速度
|
||||||
|
- **自动清理**:每次打包自动删除旧文件
|
||||||
|
|
||||||
|
### 3. 体积监控
|
||||||
|
- 单文件超过 2MB 会发出警告
|
||||||
|
- 帮助及时发现打包体积问题
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
|
||||||
|
### 开发模式
|
||||||
|
```bash
|
||||||
|
# 编译(不压缩)
|
||||||
|
pnpm run compile
|
||||||
|
|
||||||
|
# 监听模式(自动重新编译)
|
||||||
|
pnpm run watch
|
||||||
|
```
|
||||||
|
|
||||||
|
### 生产模式
|
||||||
|
```bash
|
||||||
|
# Windows
|
||||||
|
set NODE_ENV=production && pnpm run package
|
||||||
|
|
||||||
|
# macOS/Linux
|
||||||
|
NODE_ENV=production pnpm run package
|
||||||
|
```
|
||||||
|
|
||||||
|
## 打包结果
|
||||||
|
|
||||||
|
- **输出目录**:`dist/`
|
||||||
|
- **入口文件**:`dist/extension.js`
|
||||||
|
- **静态资源**:`dist/assets/`
|
||||||
|
|
||||||
|
## 性能对比
|
||||||
|
|
||||||
|
| 模式 | 体积 | 编译速度 | Source Map |
|
||||||
|
|------|------|----------|------------|
|
||||||
|
| 开发 | 较大 | 快 | 完整 |
|
||||||
|
| 生产 | 小 | 较慢 | 隐藏 |
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
1. 开发时使用 `pnpm run watch`,修改代码自动重新编译
|
||||||
|
2. 发布前必须使用生产模式打包
|
||||||
|
3. 如果打包体积超过 2MB,检查是否引入了不必要的依赖
|
||||||
@ -10,24 +10,23 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
|
|||||||
|
|
||||||
/** @type WebpackConfig */
|
/** @type WebpackConfig */
|
||||||
const extensionConfig = {
|
const extensionConfig = {
|
||||||
target: 'node', // VS Code extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
|
target: 'node',
|
||||||
mode: 'none', // this leaves the source code as close as possible to the original (when packaging we set this to 'production')
|
mode: process.env.NODE_ENV === 'production' ? 'production' : 'none',
|
||||||
|
|
||||||
entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
|
entry: './src/extension.ts',
|
||||||
output: {
|
output: {
|
||||||
// the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
|
|
||||||
path: path.resolve(__dirname, 'dist'),
|
path: path.resolve(__dirname, 'dist'),
|
||||||
filename: 'extension.js',
|
filename: 'extension.js',
|
||||||
libraryTarget: 'commonjs2'
|
libraryTarget: 'commonjs2',
|
||||||
|
clean: true // 自动清理旧文件
|
||||||
},
|
},
|
||||||
externals: {
|
externals: {
|
||||||
vscode: 'commonjs vscode', // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
|
vscode: 'commonjs vscode',
|
||||||
'node-notifier': 'commonjs node-notifier' // node-notifier 依赖原生模块,必须排除
|
'node-notifier': 'commonjs node-notifier'
|
||||||
// modules added here also need to be added in the .vscodeignore file
|
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
// support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
|
extensions: ['.ts', '.js'],
|
||||||
extensions: ['.ts', '.js']
|
mainFields: ['module', 'main']
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
@ -36,15 +35,21 @@ const extensionConfig = {
|
|||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
use: [
|
use: [
|
||||||
{
|
{
|
||||||
loader: 'ts-loader'
|
loader: 'ts-loader',
|
||||||
|
options: {
|
||||||
|
transpileOnly: true, // 加快编译速度
|
||||||
|
compilerOptions: {
|
||||||
|
sourceMap: true
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
devtool: 'nosources-source-map',
|
devtool: process.env.NODE_ENV === 'production' ? 'hidden-source-map' : 'nosources-source-map',
|
||||||
infrastructureLogging: {
|
infrastructureLogging: {
|
||||||
level: "log", // enables logging required for problem matchers
|
level: "log",
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new CopyWebpackPlugin({
|
new CopyWebpackPlugin({
|
||||||
@ -52,6 +57,15 @@ const extensionConfig = {
|
|||||||
{ from: 'src/assets', to: 'assets' }
|
{ from: 'src/assets', to: 'assets' }
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
]
|
],
|
||||||
|
optimization: {
|
||||||
|
minimize: process.env.NODE_ENV === 'production',
|
||||||
|
usedExports: true // Tree Shaking
|
||||||
|
},
|
||||||
|
performance: {
|
||||||
|
hints: 'warning',
|
||||||
|
maxAssetSize: 2 * 1024 * 1024, // 2MB
|
||||||
|
maxEntrypointSize: 2 * 1024 * 1024
|
||||||
|
}
|
||||||
};
|
};
|
||||||
module.exports = [ extensionConfig ];
|
module.exports = [ extensionConfig ];
|
||||||
Reference in New Issue
Block a user