专栏首页web前端记录vuecli4打包优化
原创

vuecli4打包优化

概述

通过安装一些插件,使打包后文件减小,提升页面打开速度。

vue版本

2.6.11

脚手架vue/cli版本

4.5.0

优化方向

减少代码量(取消生产sourcemap)、 合并压缩代码(gzip)、 公共代码提取

优化前后对比:

// 公共设置
const IS_PROD = ['production'].includes(process.env.NODE_ENV) // 生产环境

vue打包优化

1. 打包分析插件

1.1 安装插件

npm install --save-dev webpack-bundle-analyzer
或
yarn add -D webpack-bundle-analyzer

1.2 在vue.config.js中配置:

module.exports = {
    chainWebpack: config => {
        // 打包分析
        if (IS_PROD) {
          config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{
            analyzerMode: 'static'
          }])
        }
    }
}

1.3 打包

会在dist文件下生成report.html分析页面

npm run build

2. 去掉console

2.1 下载安装插件

cnpm install uglifyjs-webpack-plugin --save-dev

2.2 在vue.config.js中配置:

const IS_PROD = ['production'].includes(process.env.NODE_ENV)
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 去除console
​
configureWebpack: config => {
    const plugins = [];
    if (IS_PROD) { // 生产环境
         plugins.push(
            new UglifyJsPlugin({
              uglifyOptions: {
                output: {
                  comments: false, // 去掉注释
                },
                warnings: false,
                compress: {
                  drop_console: true,
                  drop_debugger: false,
                  pure_funcs: ['console.log'] //移除console
                }
              }
            })
          )    
    }
    config.plugins = [...config.plugins, ...plugins];
}

2.3 打包

部署到服务器,F12后,在console查看没有console的输出内容

npm run build

3. gzip压缩

3.1 安装插件

安装5.00及以下的版本(高版本会报错),安装命令:

yarn add compression-webpack-plugin -D

在package.json中

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

3.2 在vue.config.js中配置

const CompressionWebpackPlugin = require('compression-webpack-plugin') // gzip压缩
​
configureWebpack: config => {
    const plugins = [];
    if (IS_PROD) { // 生产环境
      plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          // test: /\.js$|\.html$|\.json$|\.css/,
          test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
          threshold: 10240, // 只有大小大于10k该值的资源会被处理
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: true // 删除原文件
        })
      )
    }
    config.plugins = [...config.plugins, ...plugins];
  },

3.3 打包

npm run build

3.4 nginx中配置:

server {
    location ~ .*\.(js|json|css)$ {
        gzip on;
        gzip_static on; # gzip_static是nginx对于静态文件的处理模块,该模块可以读取预先压缩的gz文件,这样可以减少每次请求进行gzip压缩的CPU资源消耗。
        gzip_min_length 1k;
        gzip_http_version 1.1;
        gzip_comp_level 9;
        gzip_types  text/css application/javascript application/json;
        root /home/tsgz/dist_hlj/; // 修改为项目前端目录
    }
}

3.5 部署到服务器

预览查看效果是否生效

4. sourceMap 设置

生产环境设置为false,不产生sourceMap

module.exports = {
    productionSourceMap: !IS_PROD, // 生产环境是否生成 sourceMap 文件
    // css相关配置
    css: {
    extract: !IS_PROD, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: !IS_PROD, // 开启 CSS source maps
    //此项设置为false会影响element-ui引入时样式失效
    // requireModuleExtension: false // css-loader升级v3后使用css.requireModuleExtension代替css.modules 默认为true
    },
}

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 的打包优化之路Vue的打包优化之路

    ECharts的JSON地图文件占了很大一部分,大概有1.96MB gzip以后900KB,这一部分是没有办法做处理的。然后ECharts也应该使用按需加载

    MrTreasure
  • react项目打包优化

    新公司所有的项目基本上都是使用 react 进行开发,之前的工程师是自己使用 webpack 搭建的项目,因为涉及到的东西不多,而且存在一些问题,已经启用。同时...

    踏浪
  • 前端打包优化(二)

    现在开发基本都是使用npm或者yarns进行依赖管理,随便引入几个依赖就会使得最终打包的结构臃肿,再加上开发者可能对依赖的包并没有特别统一管理,需要什么就引入什...

    随心助手
  • Vue打包优化之code spliting

    如果我们对所有的代码进行合理的拆分,将首屏和非首屏的代码进行剥离,将业务代码和基础库代码进行拆分,在需要某段代码的时候再加载它,下次若再需要用则从缓存中读取.....

    QQ音乐前端团队
  • 记一次webpack打包优化

    大当家
  • webpack实战——打包优化【中】

    上篇从多线程打包和缩小打包作用域两个方面入手,对webpack打包层面做出优化。本篇描述从动态链接库思想方面继续深入探究打包层面的深度优化。

    流眸
  • webpack实战——打包优化【下】

    这是webpack打包优化【下】篇。前几篇针对性能要求高的项目从加快打包速度、减小资源体积方面入手,提出了一些优化政策,然后测试都可起到一定优化效果。本篇描述死...

    流眸
  • webpack实战——打包优化【上】

    在打工过程中,非常耗时的一个工作是使用loader将各种资源进行转译处理,例如常见的使用babel-loader将ES6+语法代码转译为ES5等。代码转移的工作...

    流眸
  • Maven 打包优化小技巧

    佛系贲八拉
  • vue-cli webpack2项目打包优化

    mcq
  • Webpack 打包优化之速度篇

    在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨;当然,那些法子对于打包速度的提升,也是大有裨益。然而,打包速度之于...

    晚晴幽草轩轩主
  • Webpack 打包优化之体积篇

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣;从早期的王者Brow...

    晚晴幽草轩轩主
  • Electron 打包优化 - 从 393MB 到 161MB

    在 上一篇(你不知道的 Electron (二):了解 Electron 打包) 中对 Electron 应用是如何被打包成可执行文件进行了简单的介绍,并且谈到...

    IMWeb前端团队
  • 前端代码打包优化 (一)

    前端资源打包在每个项目中都会有涉及,从如何优化构建速度和优化构建输出代码来说明一些方法。

    随心助手
  • Vue项目打包编译优化

      默认情况下,当我们执行 npm run build 命令打包完一个项目后,会得到一个dist目录,里面有一个js目录,存放了该项目编译后的所有js文件。  ...

    文渊同学
  • 打包优化实践(如何Code Spliting)

    开发环境中可使用 analyze-webpack-plugin 观察各模块的占用情况。以该项目为例:浏览器中输入 http://localhost:3000/a...

    牧云云
  • webpack打包速度和性能再次优化

    一. 改单dll为双dll ? 因为上图原因,使用CommonsChunkPlugin时,导致其打包出来的vendors.js内的模块ID会因为其他文件引用模块...

    smy
  • webpack 学习笔记系列06-打包优化

    可选值:async(默认) | initial | all(推荐),针对下面的 a.js 和 b.js

    CS逍遥剑仙
  • webpack常用loader和plugin及打包速度优化

    mcq

扫码关注云+社区

领取腾讯云代金券