Vue CLI优化秘籍：让你的开发快如闪电⚡️

Vue CLI优化秘籍：让你的开发快如闪电⚡️

引用

CSDN

等

12

来源

1.

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

2.

https://blog.csdn.net/siwangdexie_copy/article/details/136863697

3.

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

4.

https://blog.csdn.net/mmc123125/article/details/143974957

5.

https://blog.csdn.net/u010227042/article/details/138500670

6.

https://worktile.com/kb/p/3660380

7.

http://www.anran233.com/details/51a80537-7134-d74c-f736-483d5a586188

8.

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

9.

https://www.showapi.com/news/article/678f2a774ddd79f11a259e85

10.

https://www.cnblogs.com/moqiutao/p/18415684

11.

https://serebrov.github.io/html/2024-04-05-profile-vue-cli-service-build.html

12.

https://cli.vuejs.ac.cn/config/

在Vue CLI项目开发中，性能优化是提升开发效率的关键环节。通过合理的配置和工具使用，我们可以显著缩短项目构建时间，让开发过程更加高效。本文将为你介绍几种实用的优化技巧，让你的Vue CLI项目开发快如闪电！

在进行性能优化之前，我们首先需要了解项目构建过程中哪些环节耗时最长。speed-measure-webpack-plugin是一个非常实用的工具，可以帮助我们分析Webpack构建过程中的时间消耗。

1. 安装插件：

npm install speed-measure-webpack-plugin --save-dev

2. 在vue.config.js中配置：

// webpack性能检测工具
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()

module.exports = {
  configureWebpack: smp.wrap({
    // 你的其他配置
  })
}

运行构建命令后，你将在控制台看到详细的构建时间分析，这将帮助你定位性能瓶颈。

Webpack默认是单线程模式，这意味着所有任务都需要排队执行。在大型项目中，这可能会导致构建时间过长。使用thread-loader可以将某些耗时的loader任务分配到多个线程中并行处理，从而显著提高构建速度。

1. 安装thread-loader：

npm install thread-loader --save-dev

2. 在vue.config.js中配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .use('thread-loader')
      .loader('thread-loader')
      .options({ workers: 2 })
  }
}

这里我们将worker数量设置为2，你可以根据自己的CPU核心数进行调整。

在项目中，图片和字体等静态资源的处理也会影响构建性能。使用url-loader或file-loader可以优化这些资源的加载方式。

1. 安装loader：

npm install url-loader file-loader --save-dev

2. 在vue.config.js中配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        // 将小于10kb的图片转换为base64编码
        options.limit = 10240
        return options
      })
  }
}

这样，小于10KB的图片将被转换为base64编码内联到代码中，减少HTTP请求次数。

在大型项目中，第三方库往往占用了相当大的代码体积。使用动态链接库（DLL）技术，可以将这些稳定的第三方库提前编译，避免每次构建时都重复处理。

1. 安装相关插件：

npm install webpack-dll-bundle-plugin --save-dev

2. 配置DLL：

在项目根目录下创建webpack.dll.config.js：

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    vendor: ['vue', 'element-ui', 'moment'] // 需要提前编译的库
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
}

3. 构建DLL：

npx webpack --config webpack.dll.config.js

4. 在主项目中引用DLL：

修改vue.config.js：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DllReferencePlugin({
        manifest: require('./dist/vendor-manifest.json')
      })
    ]
  }
}

通过以上步骤，你可以将第三方库的构建时间从主项目中分离出来，从而加快整体构建速度。

除了上述核心优化方法外，还有一些额外的建议可以帮助你进一步提升Vue CLI项目的构建性能：

1. 启用持久化缓存：在vue.config.js中添加以下配置：

module.exports = {
  configureWebpack: {
    cache: {
      type: 'filesystem'
    }
  }
}

2. 优化依赖包：定期检查package.json，移除未使用的依赖包，并使用npm outdated查看可以更新的依赖包。

3. 关闭source map：在生产环境中关闭source map可以减少构建时间和生成的文件大小。在vue.config.js中添加：

module.exports = {
  productionSourceMap: false
}

通过以上优化方法，你可以显著提升Vue CLI项目的开发效率。当然，每个项目的特点不同，建议根据实际情况选择合适的优化方案。希望这些技巧能帮助你打造更快、更高效的Vue CLI开发环境！