前言

性能优化：轻量化首屏加载，单独拎出登录页，使得登录页面加载快速轻便。

配置

1. webpack.config.js

module.exports = {

  ...
  
  // 多页面配置 - 入口文件
  entry: {
    app: './src/main.js', // 门户的入口文件
    login: './src/main_login.js' // 登录页的入口文件
  },
  
  ...
  
}

2. webpack.dev.js

chunks中的名称为入口文件中的命名。

const devWebpackConfig = merge(baseWebpackConfig, {

    ...
    
    // 多页面配置 - 生成文件
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks: ['app'] // 只加载app.js 
    }),
    new HtmlWebpackPlugin({
      filename: 'login.html',
      template: 'index.html',
      inject: true,
      chunks: ['login'] // 只加载login.js
    }),
    
    ...
    
})

运行后，可以看到如下图，访问登录界面时，直接在login.js，而不加载app.js,在对应的入口main_login.js中引入只需要登录时引入的文件，这样就可以实现登录页加载资源小，首屏加载快的需求。

资源加载修改前后对比图

修改前：

修改后：