vue.config.js中配置webpack 提高代码编译速度实现

Posted 2021-09-09 花之舞

参考相关文档:

一行可以让项目启动快 70% 以上的代码
https://mp.weixin.qq.com/s/eS...

下边两种方式均可以 提升编译速度
启动本地项目 第一遍速度普遍都慢， 第二遍后速度提升很多

安装插件在开发环境，仅优化开发环境的编译速度
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.链式写法

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

2. 普通写法

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