vue3项目打包优化三步走

最新推荐文章于 2024-02-25 21:04:24 发布

VIP文章 jianshe1992

最新推荐文章于 2024-02-25 21:04:24 发布

阅读量1k

点赞数

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

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

版权

一：减少打包体积，不生成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