Vue CLI项目启动加速技巧大揭秘

Vue CLI项目启动加速技巧大揭秘

引用

CSDN

等

10

来源

1.

https://blog.csdn.net/qq_42389674/article/details/136332661

2.

https://blog.csdn.net/qq_43664120/article/details/137671498

3.

https://blog.csdn.net/xuxingyuan_/article/details/135779733

4.

https://blog.csdn.net/qq_73917015/article/details/135948632

5.

https://blog.csdn.net/qq_46244470/article/details/139568332

6.

https://blog.csdn.net/weixin_45153463/article/details/135932711

7.

https://www.wanjunshijie.com/note/vue/7801.html

8.

https://my.oschina.net/emacs_8712324/blog/17083166

9.

https://worktile.com/kb/ask/786849.html

10.

https://blog.namichong.com/learn/web/vue/vue_project_packaging_optimization.html

Vue CLI作为Vue.js项目的脚手架工具，极大地简化了项目搭建和开发流程。然而，随着项目规模的扩大和依赖的增多，Vue CLI项目的启动速度可能会变得越来越慢，严重影响开发效率。本文将深入分析Vue CLI项目启动慢的原因，并分享一系列实用的优化技巧，帮助开发者显著提升项目启动速度。

Vue CLI项目启动慢通常由以下几个因素导致：

1. 项目依赖过多：随着项目的发展，往往会引入大量第三方库，这些依赖在启动时需要逐个加载，导致启动时间延长。

2. Webpack配置不合理：Webpack是Vue CLI项目的核心构建工具，其配置直接影响项目启动速度。如果配置不当，如未开启缓存、未优化代码分割等，都会导致启动变慢。

3. 环境配置不当：Node.js版本过低、系统资源不足等环境因素也会显著影响项目启动速度。

4. 代码结构不合理：大量代码集中加载、未使用懒加载机制等都会导致启动时间增加。

升级Node.js版本

Node.js的版本对项目启动速度有显著影响。较新版本的Node.js在性能上通常会有较大提升。因此，建议将Node.js升级到最新稳定版本。

使用yarn加速依赖安装

相比于npm，yarn在依赖安装速度上有明显优势。通过使用yarn，可以显著减少项目启动时依赖加载的时间。

yarn install

配置环境变量

合理配置环境变量可以避免不必要的构建过程，从而提升启动速度。例如，可以通过设置productionSourceMap来控制是否生成Source Map。

module.exports = {
  productionSourceMap: false,
};

升级Webpack版本

Webpack 5相比Webpack 4在性能上有显著提升，特别是在模块缓存和持久化缓存方面。因此，建议将Webpack升级到最新版本。

使用cache-loader缓存内容

通过使用cache-loader，可以缓存Webpack的构建结果，避免重复计算，从而提升启动速度。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'cache-loader',
          'babel-loader',
        ],
      },
    ],
  },
};

开启terser-webpack-plugin代码压缩

terser-webpack-plugin可以对代码进行压缩和优化，减少最终打包文件的大小，从而提升启动速度。

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

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

开启摇树优化（Tree Shaking）

摇树优化可以移除未使用的代码，减少最终打包文件的大小。

module.exports = {
  optimization: {
    usedExports: true,
  },
};

按需引用组件库

避免将整个组件库打包进最终文件中，而是仅引用需要的组件。例如，使用lodash时可以通过以下方式按需引入：

import _ from 'lodash';
// 改为
import { debounce } from 'lodash';

减少第三方插件体积

对于体积较大的插件，如moment，可以仅引入需要的语言包。

import moment from 'moment';
// 改为
import moment from 'moment/min/moment-with-locales.min.js';

移除console和debugger

在生产环境的打包过程中，通过配置terser-webpack-plugin插件移除所有的console和debugger语句。

代码分割和懒加载

利用Webpack的代码分割功能，将代码分割成多个小块，然后按需加载。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      // 使用懒加载
      component: () => import('@/views/About.vue'),
    },
  ],
});

使用CDN加载依赖

将Vue、Vuex、Vue Router等常用库通过CDN引入，而不是打包到最终文件中。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.min.js"></script>

开启Gzip压缩

通过compression-webpack-plugin插件启用Gzip压缩，可以显著减少传输文件的大小。

const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.(js|css|json|svg|ttf|woff|woff2|eot)(\?.*)?$/i,
        threshold: 10240,
        minRatio: 0.8,
      }),
    ],
  },
};

优化图片和字体加载

使用url-loader或file-loader对图片和字体文件进行优化处理。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

通过上述优化技巧的综合应用，可以显著提升Vue CLI项目的启动速度。以一个实际项目为例，优化前后的性能对比如下：

• 优化前：

  • 第一次启动：6分钟
  • 热启动：2分钟
  • 第一次打包：30秒
  • 再次打包：20秒

• 优化后：

  • 第一次启动：10秒
  • 热启动：5秒
  • 第一次打包：20秒
  • 再次打包：10秒

1. 兼容性问题：部分优化技巧可能会影响代码的兼容性，例如移除console和debugger语句可能会影响调试过程。

2. 风险控制：在进行大规模优化前，建议先在测试环境中验证效果，避免对生产环境造成影响。

3. 持续优化：项目启动速度的优化是一个持续的过程，需要根据项目发展和新技术的出现不断调整优化策略。

通过以上这些优化技巧，开发者可以显著提升Vue CLI项目的启动速度，从而提高开发效率。在实际应用中，建议根据项目的具体情况选择合适的优化方案，以达到最佳效果。