基于vue-cli4优化webpack打包速度

1、引入和使用打包计时插件

pnpm i speed-measure-webpack-plugin -D

在vue.config.js配置使用插件

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
module.exports = {
	//.............................忽略的内容
	configureWebpack (config) {
        return {
            //...........................忽略的内容
            plugins: [
                new Webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery',
                    'windows.jQuery': 'jquery'
                }),
                new SpeedMeasurePlugin() //关键是这里，配置加入插件。其实加插件的配置方式有很多种，其他方式也行
            ]
        };
    },
	//..............................忽略的内容

}

2、引入和使用缓存插件

pnpm install hard-source-webpack-plugin -D

在vue.config.js配置使用插件

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
	//.............................忽略的内容
	configureWebpack (config) {
        return {
            //...........................忽略的内容
            plugins: [
                new Webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery',
                    'windows.jQuery': 'jquery'
                }),
                new SpeedMeasurePlugin(),
				new HardSourceWebpackPlugin() //关键是这里，配置加入插件。其实加插件的配置方式有很多种，其他方式也行
            ]
        };
    },
	//..............................忽略的内容

}

提醒：vue-cli4已经内置了cache-loader，使用hard-source-webpack-plugin能进一步提高打包速度。