vue项目打包优化的方法实战记录

为了优化Vue项目的打包体积和加载速度，我们可以采取以下几个方法：

1. 拆分第三方库和业务代码

在项目开发过程中，我们经常会使用一些第三方库，如lodash、moment等，这些库往往会占用较大的文件体积。为了减小打包体积，可以将它们拆分到不同的chunk中，例如使用webpack的SplitChunksPlugin插件进行拆分。除此之外，我们还可以将业务代码和第三方库进行拆分，让它们分别打包成不同的chunk，从而提高页面加载速度。

// webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    app: './src/main.js',
    vendor: [
      'lodash',
      'moment',
    ],
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[chunkhash].css',
    }),
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'initial',
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

2. 使用动态import

在Vue项目中，使用动态import可以将组件等模块按需加载，从而提高首屏加载速度。我们可以使用内置的async组件或Vue Router的lazy load特性来实现动态import。例如：

// 使用async组件
const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

// 使用Vue Router的lazy load特性
const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo.vue') },
    { path: '/bar', component: () => import('./Bar.vue') },
  ],
})

除了组件和模块，我们还可以使用动态import加载图片和其他资源，例如：

// 动态import图片
const img = () => import('./logo.png')

// 动态import其他资源
const data = () => import('./data.json')

通过这些方法，我们可以将页面加载速度显著提升，提升用户的交互体验。