基于 webpack 的 vue 项目优化-JavaScript中文网-JavaScript教程资源分享门户

Vue 是一款流行的前端框架，它拥有很好的可维护性和性能。但是，在开发大型 Vue 应用时，你可能会遇到性能瓶颈。这时候，使用 webpack 进行项目优化是个不错的选择。本文将介绍一些基于 webpack 的 Vue 项目优化技巧。

1. 优化打包速度

在使用 webpack 打包 Vue 项目时，我们希望打包速度尽可能快。下面是一些提升打包速度的技巧：

1.1 使用 DLLPlugin

DLLPlugin 可以将第三方库（如 Vue、Vuex 等）打包成一个包，减少了每次构建时的依赖分析和打包耗时。具体操作步骤如下：

配置 webpack.config.dll.js 文件：

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

module.exports = {
  entry: {
    vendor: ['vue', 'vuex', 'vue-router', 'axios'] // 可根据项目需求自定义
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].dll.js',
    // library 需要和 DllPlugin 中的 name 一致
    library: '[name]_dll'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist', '[name]-manifest.json'),
      // name 需要和 output.library 一致
      name: '[name]_dll'
    })
  ]
}

运行 webpack --config webpack.config.dll.js 命令，生成 vendor.dll.js 和 vendor-manifest.json 文件。
配置 webpack.config.js 文件：

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

module.exports = {
  // 首先引入 dll 文件
  entry: {
    app: './src/main.js',
    vendor: ['vue', 'vuex', 'vue-router', 'axios'] // 可根据项目需求自定义
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    // 然后告诉 webpack 使用 DllReferencePlugin 插件加载 vendor.dll.js 文件
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/vendor-manifest.json')
    })
  ]
}

1.2 使用 HappyPack

HappyPack 可以让 webpack 适用多线程，从而加速构建时间。具体操作步骤如下：

安装 HappyPack：npm i happypack -D。
配置 webpack.config.js 文件：

const Happypack = require('happypack');
const os = require('os');
const HappyThreadPool = Happypack.ThreadPool({ size: os.cpus().length - 1 });

module.exports = {
  ...
  module: {
    rules: [
      {
        ...
        use: ['happypack/loader?id=vue']
      },
      {
        ...
        use: ['happypack/loader?id=js']
      }
    ]
  },
  plugins: [
    ...
    new Happypack({
      id: 'vue',
      threadPool: HappyThreadPool,
      loaders: ['vue-loader']
    }),
    new Happypack({
      id: 'js',
      threadPool: HappyThreadPool,
      loaders: ['babel-loader']
    })
  ]
}

2. 优化代码分割

代码分割可以让我们将代码分成更小的块，以此来减小文件大小，提高加载速度。下面是一些优化代码分割的技巧：

2.1 使用 SplitChunksPlugin

SplitChunksPlugin 可以将公共代码提取到一个公共块中，避免代码重复。具体操作步骤如下：

配置 webpack.config.js 文件：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}

2.2 按需加载路由和组件

按需加载可以减小首屏加载大小，从而提高速度。具体操作步骤如下：

使用 webpack 和 babel 的动态 import()；
使用 Vue 提供的异步组件：

Vue.component('async-component', () => import('./async-component'))

3. 优化文件体积

文件体积是影响加载速度的重要因素，下面是一些优化文件体积的技巧：

3.1 压缩代码

压缩代码可以减小文件大小，从而提高速度。在 webpack 中，我们可以使用 UglifyJsPlugin 插件对代码进行压缩：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  ...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_console: true, // 删除所有的 console 语句
            collapse_vars: true,
            reduce_vars: true
          },
          output: {
            comments: false, // 删除所有注释
            beautify: false
          }
        }
      })
    ]
  }
}

3.2 减小图片大小

在 Vue 项目中，我们经常使用图片来装饰页面，但是图片过大会增加加载时间。这时可以使用如下技巧：

使用图片压缩工具，如 tinypng.com、kraken.io 等；
使用 base64 编码：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABAQMAAADO7P..."/>

4. 其他技巧

配合使用 lint 工具和代码规范，避免不必要的代码冗余和错误；
使用 Tree Shaking，可以剔除项目中没有用到的代码，进一步减小文件体积。

总结

通过上述的优化技巧，我们可以让 Vue 项目在性能方面得到很大的提升。当然，这些技巧并不是绝对的，需要根据具体的项目情况去适配。希望这篇文章能够对大家有所启发。完整示例代码可见我的 GitHub。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65ac9001add4f0e0ff625aaf