在vue2项目里面的vue.config.JS配置一个打包速度很快的webpack文件
时间: 2024-03-17 20:45:50 浏览: 113
为了优化 Vue 2 项目的打包速度,你可以对 webpack 进行一些优化配置,例如:
1. 使用 `cache-loader` 缓存 loader 执行结果,避免重复执行相同的 loader。
2. 使用 `thread-loader` 将 loader 的执行放到 worker 池中,并行执行,提高构建速度。
3. 使用 `uglifyjs-webpack-plugin` 对代码进行压缩,减小文件体积,加快网络传输速度。
4. 使用 `webpack-bundle-analyzer` 分析打包后的文件大小,找出体积较大的模块并进行优化。
在 `vue.config.js` 文件中进行配置,示例代码如下:
```js
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()
module.exports = smp.wrap({
configureWebpack: {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
})
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
cacheDirectory: true
}
}),
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(path.join(__dirname, 'public/vendor/vue-manifest.json'))
})
]
},
chainWebpack: config => {
config.optimization.delete('splitChunks')
config.module
.rule('js')
.use('cache-loader')
.loader('cache-loader')
.end()
.use('thread-loader')
.loader('thread-loader')
.options({
workers: require('os').cpus().length - 1
})
.end()
}
})
```
这里使用了 `speed-measure-webpack-plugin` 来测量 webpack 的构建时间,以便对优化效果进行评估。同时,使用了 `terser-webpack-plugin` 对代码进行压缩,使用了 `cache-loader` 和 `thread-loader` 对 loader 进行缓存和并行执行,使用了 `DllReferencePlugin` 来分离第三方库的代码,减小打包后文件的体积,加快构建速度。
注意,以上优化配置仅供参考,具体的优化策略需要根据项目实际情况进行调整。
阅读全文