vue-cli3项目打包优化

原始包大小

在这里插入图片描述

以下主要操作都在文件 vue.config.js 下进行,如没有此文件,就在项目根目录下新建。

1.去掉 .map 文件

.map 文件的作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
有了 .map 就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。

操作:

module.exports = {
  // ...
  productionSourceMap: false,
}

包大小:

在这里插入图片描述

2.图片压缩

此操作会压缩图片质量,选择使用

操作:

npm install image-webpack-loader --save-dev
module.exports = {
  // ...
  chainWebpack: config => {
    // ...
    config.module
      .rule('images')
      .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true
        })
        .end()
  },
}

包大小:

在这里插入图片描述

3.去除console

代码中 console.log 越多,效果越明显,可选择使用。

操作:

npm install uglifyjs-webpack-plugin --save-dev
module.exports = {
  // ...
  chainWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config
        .plugin('uglifyjs-plugin')
        .use('uglifyjs-webpack-plugin', [{
          uglifyOptions: {
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']
            }
          }
        }])
        .end()
    }
  }
}

包大小:

在这里插入图片描述

4.CDN加速

维护上不受控制,所以只把那些不可能改动的代码或者库分离出来,通过CDN加速加载。

为了避免使用CDN遇到坑,建议使用可靠的CDN。

此项选择使用。不建议使用。

操作:

module.exports = {
  // ...
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 分离不常用资源库
      config.externals = {
        'vue': 'Vue',
        'vue-router': 'VueRouter'
      }
    }
  }
}
<!-- CDN示例 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

包大小:

在这里插入图片描述

5.开启Gzip压缩

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度,可以减小60%以上的体积。

注意:这个需要服务器配合开启Gzip,也可打包时不配置,直接在服务器端进行Gzip压缩。

操作:

npm install compression-webpack-plugin --save-dev
module.exports = {
  // ...
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config
        .plugin('gzip-plugin')
        .use('compression-webpack-plugin', [{
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: /\.js$|\.html$|\.json$|\.css$|\.ttf$/,
          threshold: 0, // 只有大小大于该值的资源会被处理
          minRatio:0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: true // 删除原文件
        }])
        .end()
    }
  }
}

包大小:

在这里插入图片描述

Image placeholder
我爱朋友
未设置
  69人点赞

没有讨论,发表一下自己的看法吧

推荐文章
apicloud如何打包vue项目?

apicloud如何打包vue项目?APICloud新建项目后,会生成以下目录结构其中index.html是入口文件,而vue-cli打包生成的文件是在dist目录下├─dist │└─static

cordova如何打包vue项目?

现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。据我现在的了解打包Vue项目目前流行的就是使用weex和cordova。weex是阿

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

Vue命令行工具vue-cli详解

本文将详细介绍Vue命令行工具vue-cli。概述Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势1、Vue-cli是一套成熟的vue项目架构设计,会

怎么打包node项目?

怎么打包node项目?可以使用JXcore打包nodejs项目:JXcore是一个支持多线程的Node.js发行版本,基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。下载JXcor

如何打包react生成的项目

如何打包react生成的项目1、点击开始-菜单-运行-cmd2、使用cd命令切换到react项目根目录3、执行npmrunbuild命令进行打包打包完成后会在项目目录下生成一个build文件夹,bui

cli3 使用 vue init 创建项目

背景 使用cli3创建的项目很简洁,如果你想使用webpack模板创建项目,或者习惯用vueinit的方式创建项目怎么办?不用担心,VueCLI>=3和旧版使用了相同的vue命令,所以VueCLI2

eclipse如何导入vue项目?

eclipse导入vue项目的方法1、首先,我们需要去导入的项目根目录下看一下,是否包含.project和.classpath文件,我这里是没有这两个文件的。这里要注意显示文件夹下的隐藏文件。2、由于

vue加载优化策略有哪些?

方法一路由懒加载vue.js是一个比较流行的前端框架,与react.js、angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手。但是单页面应用也都有其弊病,有时候首屏

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

vue1和vue2的区别是什么?

vue1和vue2的区别模板v2每个组件只允许有一个根元素,v1允许一个组件有多个根元素生命周期函数vue1.0周期解释init组件刚刚被创建,但Data、method等属性还没被计算出来create

vue 生成二维码插件 vue-qrcode

链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

Python 打包的现状:包的三种类型

英文|ThestateofPythonPackaging【1】原作|BERNATGABOR译者|豌豆花下猫声明:本文获得原作者授权翻译,转载请保留原文出处,请勿用于商业或非法用途。pip19.0已经于

Python 打包——过去、现在与未来

英文|Pythonpackaging-Past,Present,Future【1】原作|BERNATGABOR译者|豌豆花下猫声明:本文获得原作者授权翻译,转载请保留原文出处,请勿用于商业或非法用途。

Qt on Linux 使用deb打包发布

DistributeQtAPPonPPAofUbuntuusingthe.debpackage.[Abstract]:在QtonLinux上开发程序完成后需要脱离本机所营造的开发库环境变量运行,则需要

使用Jenkins一键打包部署SpringBoot应用,就是这么6!

SpringBoot实战电商项目mall(25k+star)地址:https://github.com/macrozheng/mall 摘要任何简单操作的背后,都有一套相当复杂的机制。本文将以Spri

Laravel-自定义全局函数-ChinaCircle 优化版

看过很多关于helper辅助文件的教程我进行个进一步优化 很多教程都会说,你在composer.json这个文件中通过添加一个自动加载的文件,就可以实现这个需求。但我认为这不是一个好的方式,当你在he

eclipse可以开发vue吗?

CodeMix是Eclipse的一款插件,它解锁了VSCode和CodeOSS附加扩展的各种技术,支持各种语言,具有Webclipse中您最喜欢的功能(包括带有LivePreview的Terminal

什么是Vue-CLI?

vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了batteries-included

vue-cli是什么?

vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了batteries-included

vue-cli怎么安装?

vuecli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了batteries-included的

cmd如何运行vue项目?

1、打开cmd命令窗口使用组合键【win+r】打开运行窗口,输入cmd,进入cmd命令窗口。2、将目录切换到vue项目下3、使用npmrundev命令然后在浏览器中输入网址http://localho

vue项目开发必须要搭脚手架么?

vue是一个渐进式的前端框架,渐进式也就意味着你可以在使用过程中,引入自己需要的一系列外部资源。这也就意味着,你可以自己搭建自己的框架,如果不用vue-cli,你可以自己搭建开发框架,需要vuex、需

前端培训-中级阶段(31)- Class 的基本语法、Class 的继承(2019-12-26期)

前端最基础的就是HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知