vue代码分割的实现(codesplit)

Vue.js 是一款流行的构建用户界面的 JavaScript 框架。它具有优雅的 API 设计、高效的渲染和灵活的数据绑定，目前已经成为了不少前端工程师喜欢的框架之一。其中，Vue 中的代码分割是进行性能优化时经常用到的一个关键概念。

代码分割能够将你的代码库划分为更小的块单元，以便实现懒加载 (lazy-loading) 和按需加载 (on-demand-loading)，从而提高加载速度，并降低初始渲染时的负担。本文将介绍如何在 Vue 应用程序中配置和使用代码分割。

简介

在前往代码分割的实现之前，首先需要了解一下 webpack 是如何工作的。

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它会创建一个依赖关系图，并将应用程序分解成多个不同的 chunk (代码块)，所有的这些 chunk 可以被 webpack 动态地加载。

在 Webpack 2 中可以使用 import () 语法进行代码分割。Vue CLI 中默认使用 Webpack 4，因此在本文中我们将介绍如何使用 import () 和 require.ensure() 工作在 Vue CLI 生成的 webpack.config.js 文件中。

配置 webpack

下面是一个示例的webpack.config.js文件，其中已经配置好了代码拆分的相关选项，让你可以快速在 Vue 应用程序中使用代码分割。这些选项包括使用 Webpack 的内置代码分割策略，以及使用 lazy loading 等策略。

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: '[name].[hash].js',
    chunkFilename: '[name].[hash].js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: true,
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '_',
      cacheGroups: {
        libs: {
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          name: 'libs'
        }
      }
    },
    minimizer: [
      new OptimizeCSSAssetsPlugin({}),
      new TerserPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      })
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css'
    })
  ],
  resolve: {
    extensions: ['.js', '.vue', '.json', '.scss'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, './src')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          process.env.NODE_ENV !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

在上述的配置中，重点是 splitChunks 配置。这里我们将 splitChunks.chunks 设置为 all，这会让 webpack 对所有 chunk 进行拆分。splitChunks.name 的值为true，会在拆分时自动命名。最后，利用 cacheGroups 来进行自定义配置。在该示例中，我们将 node_modules 中的文件都单独拆分到名为 libs 的 chunk 中，告诉 webpack 需要在应用程序中使用该 chunk。

示例

接下来，我们将介绍一些使用代码分割实现的模块加载的示例。这些示例主要包括 prefetching 和 preload 两种技术，前者用于预取资源，后者则用于预加载资源。

示例一：Prefetching

Prefetching 即预取技术，可在浏览器空闲时提前加载需要用到的资源，从而提高页面的加载速度。

const Home = () => import(/* webpackPrefetch: true */ '@/components/Home')

在上述代码片断中，我们使用了一个名为 webpackPrefetch 的特殊注释。这个特殊注释会告诉 Webpack 需要对组件进行预取操作，从而在浏览器空闲时提前载入组件。

示例二：Preload

Preload 与 Prefetching 相似，它会预先加载需要用到的资源，但它的优点是可以更加精细地控制资源的加载。Preload 会在主要资源加载前，优先加载其他关键的资源，例如字体或 css 样式。

const About = () => import(/* webpackPreload: true */ '@/components/About')

在上述代码片段中, 我们使用了一个名为 webpackPreload 的特殊注释。这个特殊注释会告诉 Webpack 需要对组件进行预加载操作，以确保组件在渲染之前已经被加载完成。

总结

Vue 中的代码分割可通过 Webpack 的内置代码分割策略来实现，从而将应用程序分解成多个不同的 chunk。Vue CLI 中默认使用 Webpack 4，因此可以使用 import () 和 require.ensure() 等方法来实现代码分割。在本文中，我们介绍了 webpack.config.js 文件的配置，并提供了一些有关代码分割的示例，其中包括 prefetching 和 preload 两种技术，它们都能够提高页面的加载速度和性能。