创建vue项目30M

### Vue 项目初始大小为30M的原因

Vue 项目初始体积较大的主要原因在于开发环境下的配置和依赖项。在未经过构建优化的情况下，项目包含了大量用于开发调试的工具和服务[^1]。

#### 开发模式下包含的内容
- **源码映射文件 (Source Maps)**：这些文件允许开发者更容易地进行错误追踪和调试。
- **热更新功能**：使得应用可以在不刷新浏览器的情况下实时反映更改。
- **完整的库版本**：例如，在开发环境中会引入整个 `vue` 库而不是仅生产所需的最小化版本。

此外，如果使用了像 Vant 或 Ant Design 这样的UI框架，则默认情况下可能加载了所有组件及其样式，即使实际只用了其中一小部分[^2][^3]。

### 如何优化Vue项目的打包体积

为了减少最终部署的应用程序尺寸并提高首屏加载速度，可以采取以下措施：

#### 移除不必要的包和插件
审查 `package.json` 文件中的依赖列表，移除不再使用的第三方库或工具。这不仅减少了安装时间和磁盘占用空间，也降低了潜在的安全风险。

#### 生产环境下禁用source map
当准备发布应用程序时，可以通过修改 Webpack 配置来关闭 source maps 的生成：

module.exports = {
    productionSourceMap: false,
};

#### 使用Tree Shaking技术去除无用代码
确保启用了 Tree Shaking 功能以消除那些从未被调用过的函数或类成员。对于 ES6 模块化的 JavaScript 而言，Webpack 和 Rollup 等现代打包器都支持此特性。

#### 对静态资源进行压缩
图片、CSS 及 HTML 文档都可以通过相应的工具来进行进一步压缩处理。比如利用 Imagemin 来缩小图像文件；借助 PurgeCSS 清理掉 CSS 中未引用的选择器等。

#### 按需加载组件
采用懒加载策略按需异步加载各个路由对应的视图组件，而非一次性全部载入内存之中。这样能够显著改善初次访问网站时的整体表现力。

#### 压缩JavaScript文件
启用 UglifyJSWebpackPlugin 插件或其他相似解决方案对编译后的 JS 文件执行混淆加密操作，从而达到减小其物理长度的目的。

const TerserPlugin = require('terser-webpack-plugin');

optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
            terserOptions: {
                compress: {},
            },
        }),
    ],
},