如何优化 Vue-cli 打包时的 vendor 包

DllPlugin 是 webpack 内置的一个插件,它可以将不会变化的第三方依赖打包到单独的 dll 文件中,从而减少主包的体积。使用步骤如下:

1. 在项目根目录下创建 webpack.dll.config.js 文件,并配置 DllPlugin 插件:

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

module.exports = {
  entry: {
    vendor: ['vue', 'vuex', 'vue-router']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_library',
      path: path.resolve(__dirname, 'dist', '[name]-manifest.json')
    })
  ]
}

2. 在 package.json 中添加 build:dll 脚本,用于生成 dll 文件:

"scripts": {
  "build:dll": "webpack --config webpack.dll.config.js"
}

3. 在 vue.config.js 中配置 configureWebpack 选项,引入 dll 文件:

const path = require('path');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DllReferencePlugin({
        manifest: path.resolve(__dirname, 'dist', 'vendor-manifest.json')
      })
    ]
  }
}

通过这种方式,vue 和 vuex 等不会变化的依赖就被打包到 vendor.dll.js 文件中,主包的体积就会相应减小。

SplitChunksPlugin 是 webpack 4 引入的一个内置插件,它可以根据一定的规则将代码分割成多个 chunk,从而减小主包的体积。使用步骤如下:

1. 在 vue.config.js 中配置 chainWebpack 选项,设置 SplitChunksPlugin:

module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `npm.${packageName.replace('@', '')}`;
          }
        }
      }
    })
  }
}

通过这种配置,webpack 会根据依赖的大小和使用频率,自动将第三方依赖分割成多个 chunk,从而减小主包的体积。

preload 和 prefetch 是 HTML5 中新引入的资源加载指令,它们可以帮助浏览器提前加载页面所需的资源,从而提高页面的加载速度。

1. 在入口 HTML 文件中添加 preload 和 prefetch 指令:

<link rel="preload" href="/js/chunk-vendors.js" as="script">
<link rel="prefetch" href="/js/about.js">

通过这种方式,浏览器可以在需要使用这些资源时,提前下载并缓存它们,从而加快页面的显示。

优化 Vue-cli 打包时的 vendor 包是一个值得关注的问题,通过使用 DllPlugin 插件、SplitChunksPlugin 插件以及 preload 和 prefetch 指令,我们可以有效地减小主包的体积,提高页面的加载速度,从而提升用户体验。