征集广大公司公共工具的前端vue.js 编译build打包速度都是多少？大小？

Question

征集一下前端开发小伙伴们，你们公司公共工具的前端vue.js 编译build打包速度都是多少？大小？

Answer 1

引自免费微信小程序：皆我百晓生

在讨论Vue.js项目编译（构建）时间和最终包大小时，我们需要考虑多个因素，包括项目的复杂性、使用的UI框架、依赖项的数量、优化设置等。这里我会提供一个基础的Vue CLI 4.x项目作为参考，并给出一些优化建议。

首先，创建一个新的Vue.js项目，我们可以使用Vue CLI：

# 安装Vue CLI (如果尚未安装)
npm install -g @vue/cli

# 创建新项目
vue create my-project

默认情况下，不进行任何额外配置，运行npm run build将产生两个文件夹：dist（生产环境）和static（静态资源）。这个过程可能需要几秒钟到几十秒不等，具体取决于您的硬件性能以及网络状况（如果有从npm下载依赖的情况）。

对于一个简单的Vue.js应用，未经优化的dist目录可能会包含以下内容：

• chunk-vendors.js: 包含第三方库（如Vue, Vuex, Vue Router等）
• app.[hash].js: 应用的主JS文件
• static/：包含图片、字体等静态资源

未压缩和混淆的体积可能如下：

• chunk-vendors.js：约500KB至1MB（根据所使用的库决定）
• app.[hash].js：几百KB，取决于应用自身代码量
• 静态资源：依据实际内容，通常数百KB到几MB

要减小编译时间并优化输出文件大小，可以尝试以下策略：

1. 按需加载（Dynamic Import）：对不是所有页面都使用的模块进行懒加载。
2. 代码分割（Code Splitting）：通过import()语法，将大型模块拆分为多个较小的模块。
3. Tree Shaking：通过ES6模块的静态分析移除未使用的代码。确保尽可能使用ES6语法。
4. Webpack Bundle Analyzer：用于可视化分析 bundle 的大小，找到可以进一步优化的地方。
5. ** terser-plugin**：用于压缩JavaScript代码。
6. MiniCssExtractPlugin：提取CSS到单独的文件，减少主JS文件大小。
7. 清除不必要的依赖：检查package.json，移除不再使用的库。
8. 图片压缩：使用如imagemin-webpack-plugin这样的插件压缩图片。
9. 启用生产模式：在生产环境中运行npm run build --mode production，这会开启一些默认的优化选项。
10. 使用CDN：对于常用库，考虑通过CDN引入，而不是打包进本地。

下面是添加terser-plugin和 MiniCssExtractPlugin 到vue.config.js中的示例代码：

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

module.exports = {
  chainWebpack: config => {
    // 压缩CSS
    config.module.rule('css')
      .use('mini-css-extract-plugin-loader')
      .loader('mini-css-extract-plugin.loader')
      .end();

    config.optimization.minimizer([
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 移除console.log
          },
        },
      }),
    ]);
  },
};

注意，这些优化措施的效果会因具体项目而异。您可能需要根据实际情况调整配置，并进行多次测试，以找到最佳平衡点。在实际工作中，您可能还会使用持续集成(CI)工具，例如Jenkins、Travis CI或CircleCI，它们可以帮助自动化构建流程，并提供详细的构建报告。