启动项目构建时间的优化 & 修改代码热更新（构建）时间的优化

启动项目构建时间的优化

虽然说启动项目时间长也没什么影响，毕竟也不是每次都要重新 npm start启动项目的，但是我就是觉得不舒服，启动时间基本都是200秒往上，都快接近三分半钟了，有的时候需要五分钟，于是我决定优化一下这个启动时间

项目是vue2脚手架项目，webpack版本是 "3.6.0"

未优化

1671858456440(1).jpg 于是我通过找文档，查webpack的官方文档, 发现了一些loader和插件可以实现优化

'cache-loader' （缓存）
'thread-loader' （多线程）
'hard-source-webpack-plugin' （使用硬盘高速缓存）

如何使用

在你写loader的webpack文件里面加入loader配置，我是webpack.base.conf.js文件

// 需要 npm i cache-loader thread-loader -D 安装
const cacheLoader = {
  loader: 'cache-loader',
}
const threadLoader = {
  loader: 'thread-loader',
  options: {
    workers: require('os').cpus.length - 1
  }
}

// 改造一下 vue-loader
{
  test: /\.vue$/,
  use: [
    cacheLoader,
    threadLoader,
    {
      loader: 'vue-loader',
      options: vueLoaderConfig
    }
  ]
},

同时也需要在你的 generateLoaders里面也加上 'cache-loader'，我的是在build/utils

const cacheLoader = {
  loader: 'cache-loader',
}

1671946787061(1).jpg 注意：修改之后第一次启动时间没有变化，但是第二次启动项目的时间就有了质的飞跃，具体看每个人的电脑设备，我的是从两百多秒提升到 47s 优化后3.jpg

修改代码热更新（构建）时间的优化

这个热更新时间严重影响到我的开发效率了，每次保存代码，都要等将近两分多钟的时间，于是我决定优化一下，经观察发现在 92% chunk asset optimization 这里耗时是最长，92%前面也有耗时，但是没有这里久，上面的优化项目启动时间的方法在这里也是适用的，也能从两分钟提升到26s 优化后.jpg

优化后2.jpg 这时候我在想能不能进一步优化呢，于是我以前用过webpack的DllPlugin，这个是能进一步提升构建时间的，然后我搜了搜关于vue的，有一个'autodll-webpack-plugin'，这个比较DllPlugin用法简单多了

// 需要安装一下，如果webpack版本低于4，需要 npm install --save-dev autodll-webpack-plugin@0.3
const AutoDllPlugin = require('autodll-webpack-plugin')
new AutoDllPlugin({
  inject: true,
  filename: '[name]-[hash].js',
  entry: {
    libs: ["axios", "echarts"],
    vendor: [
      'vue',
      "jquery",
      "vue-router",
      "vuex"
    ],
  }
}),

这样，就可以了；如果是webpack的dll插件，一般还得新建一个webpack.dll.config，然后启动项目之前还得先运行dll的命令，生成一个js, 还得在html入口的html页面引入

经过'autodll-webpack-plugin'之后，时间已经从26s提升到平均9s

优化后3.png

优化后4.png

优化后5.png 主要是将不常变化的代码提前打包，并复用，如 vue等等；

注意：不能将element ui 放进去，会出现各种奇怪的bug，暂时也找不到原因。