VUE项目首屏速度优化

1. UI组件按需引入；

2. 登录页与其它部分分离——>webpack的多入口功能；

   什么是HtmlWebpackPlugin：

   • 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
   • 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

场景：vue项目打开登录首页时等待时间太久。

vue中普通入口是app，可以再加一个入口login，指向另外一个js文件；

1.修改webpack配置：

// html-webpack-plugin 使用
// 安装 npm install html-webpack-plugin --save
// 默认配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
 
module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}
// 当配置多个入口文件 entry 时， 生成的将都会使用 script 引入
module.exports = {
  new HtmlWebpackPlugin({
    filename: 'index1.html', // 配置输出文件名和路径
    template: './src/index1.html', // 配置文件模板
    chunks : ['index1']
  }), // Generates default index.html
  new HtmlWebpackPlugin({
     filename: 'index.html', // 配置输出文件名和路径
     template: './src/index.html', // 配置文件模板
     chunks : ['index']            
  })
}

3. 路由的懒加载

4. 使用cdn

打包时，把vue、vuex、vue-router、axios等，换用国内的bootcdn直接引入到根目录的index.html。
在webpack build 下 base.conf.js 设置中添加externals，忽略不需要打包的库。

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  externals:{
    'vue':'Vue',
    'vue-router':'VueRouter',
    'vuex':'Vuex'
  },
  // 格式为'aaa':'bbb'，其中，aaa表示要引入的资源的名字，bbb表示该模块提供给外部引用的名字，由对应的库自定。例如，vue为Vue，vue-router为VueRouter