　　最近在项目中遇见了一个登录页要加载很久，在项目很复杂的时候打的 js 包很大，会导致加载时间过长从而影响到用户体验，需要对加载进行优化。

使用分析工具分析js包

　　使用webpack的可视化资源分析工具 webpack-bundle-analyzer，它可以直观分析打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项等，我们可以根据这些来对文件的分割进行操作，是我们后面分析资源包大小的基础。

// 安装 webpack-bundle-analyzer
npm i webpack-bundle-analyzer --save-dev

// 随后在 vue.config.js 文件中进行配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 
module.exports = {
  configureWebpack: config => {
    config.plugins.push(new BundleAnalyzerPlugin())
  }
}

// 随后打包项目生成分析图
npm run build

分割模块

　　我们可以通过 splitchunks 将一些常用的库进行分割抽离出来，这样也可以加快加载速度。这一步也需要在 vue.config.js 中进行配置。

module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      // async异步代码分割 initial同步代码分割 all同步异步分割都开启
      chunks: "all",
      // 形成一个新代码块最小的体积
      minSize: 30000,
      // 模块至少使用次数
      minChunks: 1,
      // 按需加载时候最大的并行请求数，默认为5
      maxAsyncRequests: 30,
      // 一个入口最大的并行请求数，默认为3
      maxInitialRequests: 30,
      cacheGroups: {
        antDesignVue: {
          // name 打包的 chunks 的名字
          name: 'chunk-ant-design-vue',
          // 将匹配到的模块打进这个缓存组
          test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
          chunks: 'initial',
          // 打包优先级，数值越大优先级高
          priority: 3,
          // 如果当前的 chunk 已被从 split 出来，那么将会直接复用这个 chunk 而不是重新创建一个
          reuseExistingChunk: true,
          // 强制抽离此模块
          enforce: true
        }
      }
    })
  }
}

使用GZIP进行代码压缩

　　我们还可以使用GZIP对代码进行压缩，减少文件大小从而达到减少加载时间的目的。

// 安装 CompressionPlugin
npm i compression-webpack-plugin -D

// 在 vue.config.js 文件中进行配置
const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
  chainWebpack: config => {
    // 在生产环境中，压缩 js、css 代码
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin').use(new CompressionPlugin({
        algorithm: 'gzip',
        // 所有匹配此正则的文件都会被进行压缩
        test: /\.(js|css|less)$/,
        filename: '[path].gz[query]',
        minRatio: 1,
        // 设置压缩门槛，单位字节，只有大于这个大小的文件才会被压缩
        threshold: 10240,
        // 是否删除原资源，建议设置为 false，这样可以让压缩资源和原始资源共存，当客户端或者服务端不支持GZIP压缩时，能够返回原始资源，保障项目正常运行
        deleteOriginalAssets: false
      }))
    }
  }
}

　　由上图可以看出 GZIP 对于大文件的压缩效果还是很明显的，我们还需要开启服务端的 GZIP 功能，来让效果更好。这里以 Nginx 服务器为例：

# 开启gzip
gzip on;
gzip_static on;
# 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
gzip_min_length 1k;
# 压缩级别1~9，值越小压缩效果越差，值越大处理越慢
gzip_comp_level 9;
# 进行压缩的文件类型
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

按需引入UI组件

　　减少全局注入，也可以有效的减少加载时间，在项目中很多时候我们为了方便都是选择将组件库进行全局引入，但是在优化角度而言更好的做法其实是按需引入，这样可以减少加载时间。

使用 babel-plugin-import

// 安装 babel-plugin-import
npm install babel-plugin-import --save-dev

// 在 babel.config.js 中进行配置
'plugins': [
  ['import', {
    'libraryName': 'ant-design-vue',
    'libraryDirectory': 'es',
    // `style: true` 会加载 less 文件
    'style': true
  }]
]

// 在 main.js 文件中，需要什么组件按需进行引入
import { DatePicker } from 'ant-design-vue';

Vue项目登录页加载优化