webpack 优化配置

1. 优化编译速度

安装插件在开发环境，仅优化开发环境的编译速度
npm i hard-source-webpack-plugin -D // 提编译速度
npm i speed-measure-webpack-plugin -D // 显示编译时长
在vue.config.js中引入
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');

1.1 链式写法

chainWebpack: (config) => {
    config.plugin('xcCache').use(HardSourceWebpackPlugin); // 自定义插件名称
    config.plugin('xcTime').use(SpeedMeasurePlugin);
},

1.2 普通写法

configureWebpack: {
    plugins: [
        new HardSourceWebpackPlugin(),
        new SpeedMeasurePlugin()
    ]
},