vue3项目打包优化三步走

最新推荐文章于 2024-08-06 10:19:24 发布

jianshe1992

最新推荐文章于 2024-08-06 10:19:24 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript vue.js webpack

本文链接：https://blog.csdn.net/jianshe1992/article/details/125335783

版权

本文介绍了如何优化Vue3项目的打包过程，包括减少打包体积，不生成map文件以减小dist体积，开启gzip压缩以提高文件传输效率，以及支持IE9以上浏览器的访问策略。通过修改vue.config.js配置和引入相关依赖，可以有效提升项目性能。

摘要由CSDN通过智能技术生成

一：减少打包体积，不生成map文件

1：vue.config.js - module.exports中添加配置项，打包后的dist体积可减少50%以上：

 productionSourceMap: false,

二：开启gzip压缩

1：package.json添加依赖：

"compression-webpack-plugin": "^1.1.2",

2：vue.config.js中引用并添加配置项：

const compressionWebpackPlugin = require('compression-webpack-plugin'); 
const productionGZipExtensions = ['js', 'css']; //压缩的文件类型

// vue.config.js中configureWebpack：
plugins: [
      new compressionWebpackPlugin({
   
        //[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
        asset: '[path].gz[query]', // 提示compression-webpack-pl