vue.config.js 的 configureWebpack.devtool 设置为 'source-map' 后,编译速度会变慢,严重影响开发进度。
改善方法:
一:改为 'module-eval-source-map'
改为 'module-eval-source-map' 在打包速度和源码信息还原程度都属于良好程度。
cheap,就是廉价的意思,它不会产生列映射,相应的体积会小很多,我们和 sourse-map 的打包结果比一下,只有原来的 1/4 。
经测试确实变快了很多。
二:启用 vue-loader (测试明显加快速度)
const { VueLoaderPlugin } = require('vue-loader')chainWebpack(config) {config.merge({module: {rules: [{test: /\.vue$/,use: ["vue-loader"],},],},plugins: [new VueLoaderPlugin(),],});},
三:使用 esbuild-loader
替代 babel-loader
esbuild-loader 是一个基于 esbuild 的 loader,编译速度比 babel-loader 快很多。
chainWebpack(config) {config.merge({module: {rules: [{test: /\.js$/,loader: 'esbuild-loader',exclude: /node_modules/, // 排除node_modules目录options: {loader: 'jsx', // 如果需要支持 JSXtarget: 'es2015' // 编译目标} },]},});},