vue-cli 记录项目实战中优化打包速度

vue-cli 记录项目实战中优化打包速度

1. 背景

随着项目的不断迭代，打包速度逐渐变慢，影响开发体验，因此需要对项目进行优化。

2. 优化方案

webpack.dll.js 是用于优化 Webpack 构建性能的一种技术，通过将不常变动的第三方库（如 Vue、Lodash 等）提前打包成一个单独的文件（DLL 文件），从而减少后续构建时间

作用：

1. 加速构建：加速构建速度，减少构建时间，提高开发体验
2. 缓存优化：dll 文件可以长期缓存, 减少每次构建的重复打包时间
3. 代码分割：将第三方库与业务代码分开打包，提高代码的可维护性和可读性

3. 如何使用

1.创建 webpack.dll.config.js 用于生成 DLL 文件

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

module.exports = {
  mode: 'production',
  entry: {
    vendor: [
      'vue',
      'vue-router',
      'pinia',
      'element-plus',
      'axios',
      'lodash',
      'echarts'
    ] // 需要提前打包的第三方库
  },
  output: {
    path: path.resolve(__dirname, 'dll'), // 输出目录
    filename: '[name].dll.js', // 输出文件名
    library: '[name]_[hash]' // 全局变量名
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]', // 与 output.library 一致
      path: path.join(__dirname, 'dll', '[name]-manifest.json') // 生成 manifest 文件
    })
  ]
};

2. 生成 DLL 文件

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

生成的文件会放在 public 目录下，包括：

• vendor.dll.js：打包后的第三方库文件
• vendor-manifest.json：记录第三方库的映射关系

3. 修改 vue.config.js 配置

在 vue.config.js 中配置 DllReferencePlugin 来引用生成的 DLL 文件。

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

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DllReferencePlugin({
        context: process.cwd(),
        manifest: require('./public/vendor/vendor-manifest.json')
      })
    ]
  }
};

注意事项

1. 更新 DLL 文件：如果第三方库有更新，需要重新运行 webpack.dll.config.js 生成新的 DLL 文件。 2.开发环境：在开发环境中使用 DLL 可以显著提升构建速度，但在生产环境中效果可能不明显。
2. Tree Shaking：DLL 文件会提前打包所有依赖，可能会影响 Tree Shaking 的效果。