Vue Cli3配置文件优化处理

1、设置productionSourceMap为false

如果不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。

设置为false打包时候不会出现.map文件

module.exports = {
    productionSourceMap: false
}

2、代码压缩

安装uglifyjs-webpack-plugin插件,可以去除项目中console.log和debugger

npm install uglifyjs-webpack-plugin --save
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘)
// 生产环境相关配置
if (isProduction) {
    // 代码压缩
    config.plugins.push(
        new UglifyJsPlugin({
            uglifyOptions: {
                //生产环境去除console等信息
                compress: {
                    warnings: false, // 若打包错误,则注释这行
                    drop_debugger: true,//是否移除debugger
                    drop_console: true,
                    pure_funcs: [‘console.log‘]//移除console
                }
            },
            sourceMap: false,
            parallel: true
        })
    )
}

3、图片资源压缩

安装 image-webpack-loader 插件,可以将大图片进行压缩从而缩小打包体积

npm install image-webpack-loader --save
    chainWebpack: config => {
        // ============压缩图片 start============
        config.module
            .rule(‘images‘)
            .use(‘image-webpack-loader‘)
            .loader(‘image-webpack-loader‘)
            .options({ bypassOnDebug: true })
            .end()
        // ============压缩图片 end============
    }

4、开启gzip压缩

开启gzip压缩,可以优化http请求,提高加载速度

npm install compression-webpack-plugin --save-dev
const CompressionPlugin = require("compression-webpack-plugin");
// 开启gzip压缩
config.plugins.push(new CompressionPlugin({
    algorithm: ‘gzip‘,
    test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"), // 匹配文件扩展名
    // threshold: 10240, // 对超过10k的数据进行压缩
    threshold: 5120, // 对超过5k的数据进行压缩
    minRatio: 0.8,
    cache: true, // 是否需要缓存
    deleteOriginalAssets:false  // true删除源文件(不建议);false不删除源文件
 }))

原文地址:https://www.cnblogs.com/theblogs/p/12241891.html

时间: 2024-11-09 01:54:55

Vue Cli3配置文件优化处理的相关文章

vue cli3 项目优化

vue-cli3 Prefetch (官网内容) <link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容. 默认情况下,一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import()按需 code splitting 的产物) 自动生成 prefetch 提示. 这些提示会被 @vue/preload-web

Vue CLI3 开启gzip压缩

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置:  压缩前后大小大致如下: 生成的压缩文件以.g

VUE CLI3.X 创建项目

Node.js环境搭建 Node.js基于V8引擎,可以让js代码脱离浏览器运行 Vue CLI3.0 需要Node.js 8.9或者更高版本. 用nvm或者nvm-windows在同一台电脑中管理多个Node版本 nvm github地址:https://github.com/nvm-sh/nvm Vue CLI 3.0环境搭建 卸载老版本vue-cli:npm uninstall vue-cli -g 安装新版本:npm install -g @vue/cli 原型开发:npm instal

nginx1.10.3一键安装/系统内核优化/配置文件优化/https/日志切割

下面的是一键安装nginx 1.10.3 最新稳定版本,编译参数是官方推荐的. yum groupinstall "Development Tools"   -y yum  install wget   zlib-devel openssl-devel pcre-devel -y cd /usr/local/src wget http://nginx.org/download/nginx-1.10.3.tar.gz tar zxvf nginx-1.10.3.tar.gz cd ngi

Nginx配置文件优化详解

Nginx配置文件优化详解 对nginx进行优化是重点也是难点,这里给出一些常用的优化措施,以及相关参数的所代表的意思.有些参数需要结合公司服务器进行设置. 全局变量的优化: #定义Nginx运行的用户和用户组user  www  www: #启动进程,通常设置成和cpu的数量相等 worker_processes  8: #为每个进程分配cpu. worker_cpu_affinity 00000001 00000010 00000100 00001000 00010000 00100000 

MySQL-5.5.32 配置文件优化详解

MySQL-5.5.32 配置文件优化详解============================== [TOC] # 一.配置文件说明 > MySQL-5.5.32是Mysql5.5系列中最后一个版本,也是最后一个有配置文件的版本,为什么这么说呢,用过5.6的博友都知道,在mysql5.6中已经不提供配置文件选择,只有一个默认的配置文件,好了,我们今天说的是5.5.32这个版,就不和大家说5.6了,下面我们来具体说一下,mysql5.5.32中,提供可选的几个配置文件, * my-small.

vue线上项目,优化前后对比

优化前: dev初次时间:52s dev时间:5s~6s build时间:374s(6.2分钟) build后zip包大小: vue.vue-router 优化后: dev初次时间:49s.48s.50s.54s.56s.69s.50s....... dev时间:5s.6.7s.4.7s.5.3s.4.8s.4.7s.4.9s.5.5s.10.8s.10.4s.9.8s.9.6s.7.9s.5.9s.6.5s...... build时间:265s.266s.263s.271s.267s.....

Vue CLI3 关闭热替换后出现的warning

用vue cli3做项目的时候如果开启了typescript的严格模式,在dev server热替换的时候往往就会打出一大堆warning,严重的影响了编译效率.官方并没有提供关闭warning的api,但是提供了修改webpack配置项的接口.通过这个接口我们就可以实现关闭warning. 根据文档webpack 相关 | Vue CLI 3 导出项目的配置为output.js,搜索check单词可发现一个插件:fork-ts-checker(github:Realytics/fork-ts-

vue/cli3 配置vux

安装各插件 试过 安装"必须安装"的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --save 3.安装vux-loader[必须安装] npm install vux-loader --save-dev 4.安装less-loader(这个是用以正确编译less源码,否则会出现 ' Cannot GET / ')[必须安装] npm install less less-load