优化vue构建速度优化

vue开发环境构建优化

使用vue-cli默认打包配置时,开发环境往往构建很慢

这是默认配置构建速度,整整花了50s

优化vue构建速度优化_第1张图片

这是优化后构建速度,可以看到快了十倍多。

优化vue构建速度优化_第2张图片

这里使用了缓存进行构建,即使关机重启后也可以加快构建速度。大大的减少了我们等待的时间。

接下来我们来看下如何配置的:

在vue.config.js中加上:

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const devPlugins = [
  new HardSourceWebpackPlugin(),
  new HardSourceWebpackPlugin.ExcludeModulePlugin([
    {
      test: /mini-css-extract-plugin[\\/]dist[\\/]loader/
    }
  ])
];


module.exports = {
    ... //其它打包配置

    configureWebpack: {
        plugins: process.env.NODE_ENV === "production" ? [] : [...devPlugins]
    },
}

你可能感兴趣的:(技能提升,vue.js,javascript,前端,webpack)