vue-cli3优化配置

最新推荐文章于 2024-03-31 09:47:08 发布
最新推荐文章于 2024-03-31 09:47:08 发布
阅读量1.8k 收藏 6
点赞数
分类专栏： Vue 技术栈 文章标签： vue vue-cli3
原文链接：https://www.cnblogs.com/zxuedong/p/12809234.html
版权

说明

本文转载自：张雪冬前端工程师学习园地-vue-cli3优化配置

1.使用cdn引入不改变的第三方库

const cdn = {
  // 忽略打包的第三方库
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios'
  },

  // 通过cdn方式使用
  js: [
    'https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js',
    'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
    'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
    'https://cdn.bootcss.com/axios/0.19.2/axios.min.js',
    'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js',
    'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js'
  ],

  css: []
}

module.exports = {

    chainWebpack: config => {
        // 配置cdn引入
        config.plugin('html').tap(args => {
          args[0].cdn = cdn
          return args
        })
    }

    configureWebpack: config => {

         // 忽略打包配置
        config.externals = cdn.externals
    }
        
}

1.1.public下的html页面引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!--循环引入-->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" crossorigin="anonymous"></script>
    <% } %>
  </body>
</html>

2.移除prefetch插件，避免加载多余的资源

module.exports = {

    chainWebpack: config => {

        // 移除prefetch插件，避免加载多余的资源
        config.plugins.delete('prefetch')
    }
}

3.定义目录的简写路径

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {


    chainWebpack: config => {

        // 定义文件夹的路径
        config.resolve.alias
          .set('@', resolve('src'))
          .set('assets', resolve('src/assets'))
          .set('components', resolve('src/components'))
          .set('router', resolve('src/router'))
          .set('store', resolve('src/store'))
          .set('views', resolve('src/views'))
    }
}

4.压缩图片

module.exports = {

    chainWebpack: config => {

        // 压缩图片
        const imagesRule = config.module.rule('images')
        imagesRule.uses.clear()
        imagesRule.use('file-loader')
            .loader('url-loader')
            .options({
             limit: 10240,
             fallback: {
              loader: 'file-loader',
              options: {
                outputPath: 'static/images'
              }
            }
          })
        }
}

5.使用gzip压缩

需要安装插件

npm i compression-webpack-plugin -D

// 引入gzip压缩插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')


module.exports = {


    configureWebpack: config => {

        // 开启gzip压缩
        config.plugins.push(
          new CompressionWebpackPlugin(
            {
              filename: info => {
                return `${info.path}.gz${info.query}`
              },
              algorithm: 'gzip',
              threshold: 10240, // 只有大小大于该值的资源会被处理 10240
              test: new RegExp('\\.(' + ['js'].join('|') + ')$'
              ),
              minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
              deleteOriginalAssets: false // 删除原文件
            }
          )
        }
    },

    // 需要gzip压缩的文件
   devServer: {
    host: 'localhost',
    port: 8080, // 端口号
    open: false, // 配置自动启动浏览器
    before (app, server) {
      app.get(/.*.(js)$/, (req, res, next) => {
        req.url = req.url + '.gz'
        res.set('Content-Encoding', 'gzip')
        next()
      })
    }
  }
}

6.配置全局sass无需再组件中引入即可使用

module.exports = {

    css: {
        extract: true,
        sourceMap: false,
        loaderOptions: {
          // 定义全局scss无需引入即可使用
          sass: {
            prependData: `
              @import "@/assets/css/variable.scss";
              @import "@/assets/css/common.scss";
              @import "@/assets/css/mixin.scss";
            `
          }
        }
     },
}

7.公共代码抽离

module.exports = {

    configureWebpack: config => {
    
        config.optimization = {
          splitChunks: {
            cacheGroups: {
              vendor: {
                chunks: 'all',
                test: /node_modules/,
                name: 'vendor',
                minChunks: 1,
                maxInitialRequests: 5,
                minSize: 0,
                priority: 100
              }
            }
          }
        }
    }
}

8.代码压缩去除console.log

module.exports = {

    configureWebpack: config => {

        if (process.env.NODE_ENV === 'production') {

            config.plugins.push(
                new TerserPlugin({
                  terserOptions: {
                    ecma: undefined,
                    warnings: false,
                    parse: {},
                    compress: {
                      drop_console: true,
                      drop_debugger: false,
                      pure_funcs: ['console.log'] // 移除console
                    }
                  }
                })
              )
        }
    }
}

完整的配置代码

// vue.config.js配置

const path = require('path')

// gzip压缩插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 代码打包之后取出console.log压缩代码
const TerserPlugin = require('terser-webpack-plugin')

// 图形化打包详情
const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const cdn = {
  // 忽略打包的第三方库
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios'
  },
  // 通过cdn方式使用
  js: [
    'https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js',
    'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
    'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
    'https://cdn.bootcss.com/axios/0.19.2/axios.min.js',
    'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js',
    'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js'
  ],
  css: []
}

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  // 是否触发eslint检查
  lintOnSave: false,
  publicPath: '/',
  // 打包文件的出口
  outputDir: 'dist',
  // 放置生成的css和js和img和fonts的目录
  assetsDir: 'static',
  // 存放index.html模板的路径
  indexPath: 'static/index.html',
  productionSourceMap: false,
  chainWebpack: config => {
    // 配置cdn引入
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })

    // 移除prefetch插件，避免加载多余的资源
    config.plugins.delete('prefetch')

    // 定义文件夹的路径
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('router', resolve('src/router'))
      .set('store', resolve('src/store'))
      .set('views', resolve('src/views'))

    // 压缩图片
    const imagesRule = config.module.rule('images')
    imagesRule.uses.clear()
    imagesRule.use('file-loader')
      .loader('url-loader')
      .options({
        limit: 10240,
        fallback: {
          loader: 'file-loader',
          options: {
            outputPath: 'static/images'
          }
        }
      })

    // 压缩响应的app.json返回的代码压缩
    config.optimization.minimize(true)
  },
  // webpack的配置
  configureWebpack: config => {
    // 忽略打包配置
    config.externals = cdn.externals
    // 生产环境配置
    if (process.env.NODE_ENV === 'production') {
      // 代码压缩去除console.log
      config.plugins.push(
        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            }
          }
        })
      )
    }

    // 开启gzip压缩
    config.plugins.push(
      new CompressionWebpackPlugin(
        {
          filename: info => {
            return `${info.path}.gz${info.query}`
          },
          algorithm: 'gzip',
          threshold: 10240, // 只有大小大于该值的资源会被处理 10240
          test: new RegExp('\\.(' + ['js'].join('|') + ')$'
          ),
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false // 删除原文件
        }
      )
    )

    // 展示打包图形化信息
    config.plugins.push(
      new BundleAnalyzer()
    )

    // 公共代码抽离
    config.optimization = {
      splitChunks: {
        cacheGroups: {
          vendor: {
            chunks: 'all',
            test: /node_modules/,
            name: 'vendor',
            minChunks: 1,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 100
          }
        }
      }
    }
  },
  css: {
    extract: true,
    sourceMap: false,
    loaderOptions: {
      // 定义全局scss无需引入即可使用
      sass: {
        prependData: `
          @import "@/assets/css/variable.scss";
          @import "@/assets/css/common.scss";
          @import "@/assets/css/mixin.scss";
        `
      }
    }
  },
  // 需要gzip压缩的文件
  devServer: {
    host: 'localhost',
    port: 8080, // 端口号
    open: false, // 配置自动启动浏览器
    before (app, server) {
      app.get(/.*.(js)$/, (req, res, next) => {
        req.url = req.url + '.gz'
        res.set('Content-Encoding', 'gzip')
        next()
      })
    }
  }

}
凯小默
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vue-cli3新建一个项目并写好基本配置(推荐)
01-21
1. 使用vue-cli3新建项目： https://cli.vuejs.org/zh/guide/creating-a-project.html 注意，我这里用gitbash不好选择选项，我就用了基本的cmd（系统命令提示符）：上下箭头和空格键可控制选项。 详细步骤： （1）...
vue项目打包优化---vue-config.js的常用配置项
weixin_42889916的博客
06-14 5926
本文主要讲了vue-config.js的几个常用配置项，和打包优化npm的插件。
vue.config.js中打包相关配置
前端-尔嵘
01-20 1041
通过对chunk生成的css和js文件数量和大小做限制，对代码进行压缩和分割，线上生产环境下使用cdn方式等对webpack打包优化。
Vue CLI 3 优化实战：构建高性能前端应用
最新发布
gitblog_00054的博客
03-31 215
Vue CLI 3 优化实战：构建高性能前端应用 项目地址:https://gitcode.com/haochuan9421/vue-cli3-optimization Vue CLI 3 是 Vue.js 官方提供的一个脚手架工具，用于快速搭建现代化的 Vue 应用程序。此项目（https://gitcode.com/haochuan9421/vue-cli3-optimization）则基于 ...
Oasis 物理第四弹：角色控制器驱动人物动画
小王的技术库
09-28 362
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
vue-cli3项目搭建配置以及性能优化
xwnxwn的专栏
04-30 1624
引用地址：vue-cli3项目搭建配置以及性能优化 - 简书 在之前的开发中主要用的是vue-cli2，最近空闲时间比较多，接下来有新项目，本着偷懒的本能，自己打算搭建一个基础包以备后期开发应用，并对其进行性能优化和配置。 该项目的GitHub：https://github.com/bayi-lzp/vue-cli3-init 求星 master分支为基础包，vi_mint_ui分支为优化后项目，可根据自己需要进行切换。 搭建整个过程如下： 初始化项目 修改目录结构 多环境运行 axios封
vue-cli4之vue.config.js打包优化
weixin_43845137的博客
01-20 4330
目录vue之cli之中的vue.config.js配置文件publicPath - 打包后 访问基础路径outputDir - 打包后输入的文件夹使用gzip压缩打包的文件大小 - compression-webpack-plugin配置别名压缩js代码 - uglifyjs-webpack-plugin vue之cli之中的vue.config.js配置文件 官网 publicPath - 打包后 访问基础路径 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置：p
浅谈vue-cli 3.0.x 初体验
11-27
最近项目正在优化。乘着有时间看了一下 vue-cli3.0.x 使用 。感觉还蛮不错的。 因为之前项目使用的 vue-cli 2 创建的，强行使用 eslint让我们很难受，一些与项目无关的 “build” 和 “config” ，让人看着就有一些...
easy-vue-cli:超高可玩性的Vue-cli
04-27
Easy-Vue-Cli --- 超简单的Vue脚手架 开箱即用的vue脚手架（全中文注释） 全薪升级的webpack4版本，优化目录文件 优雅的打包进度条, 让你的终端更加优雅 更简单的proxy配置，只需要再package.json内的proxy配置...
详解基于vue-cli优化的webpack配置
01-21
关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释，有助于更好的理解webpack。 仔细总结了一下，自己的优化基本还是网上流传的那几点 通过 ...
vue-cli2 构建速度优化的实现方法
12-10
网上流传 vue-cli 一些优化配置，有些在新版本的 vue-cli 和 webpack3 已经不再需要了，有些是针对 webpack4 的。对于新版本的 vue-cli 和 webpack3，以下简单配置优化后，即可大幅提升构建速度。 按需引用及动态...
整理项目中vue.config.js打包优化
牛先森家的博客
02-15 603
项目中vue.config.js打包优化
前端vue项目性能优化【打包压缩、去除亢余文件】
在写作的路上持续输出。
09-27 2903
vue项目性能优化，打包压缩、去除亢余文件
vue项目打包优化及配置vue.config.js文件（实测有用）
热门推荐
weixin_46824709的博客
07-28 1万+
/是否为生产环境//本地环境是否需要使用cdn//cdn链接//cdn模块名称和模块作用域命名（对应window里面挂载的变量名称）externals{'vue''Vue','vuex''Vuex','axios''axios'},//cdn的css链接css[],//cdn的js链接js['https'https'https'https]}//打包配置文件assetsDir'static','./',https。...
vue项目vue.config.js配置打包压缩以及代码分离以及打包后dist文件夹添加时间戳实现更新后无缓存，自动压缩打包后dis文件夹并加上打包时间以及proxy代理
weixin_51406830的博客
03-15 3157
const moment = require('moment'); const TerserPlugin = require('terser-webpack-plugin') const FileManageerPlugin = require('filemanager-webpack-plugin'); const CompressionPlugin = require("compression-webpack-plugin"); module.exports = { configureWebpack
vue-cli4配置打包图片跟之前同目录,vue-cli3应该也可以使用
weixin_39838846的博客
06-10 776
vue-cli4,vue-cli3打包后图片目录使用原先目录
vue项目vue.config.js文件打包 配置、优化配置
HeXinT的博客
06-01 2817
vue项目优化、vue.config.js文件打包 配置、优化配置、vue配置，优化配置
vue动态配置启动或打包时的参数、读写文件、设置、readFileSync、writeFileSync、replace、process、toString、join
“代码农”微信公众号
04-17 1692
vue动态配置(设置)运行与打包参数、读写文件、readFileSync、writeFileSync、replace、process、toString、join
Vue—如何实现多页面配置并实现打包
不确定因素的博客
04-08 4011
为什么会用多页面 在开发时，对于同一类型的多网站，多页面大大节省开发时间，只需要配置一次就可以实现多次开发变成单次开发，同时一个包就可以展示一整个网站 如何在vue.config.js配置多页面信息 多页面打包会打包多个.html文件，根据.html配置跳转地址就可以了 目录（四个页面） 配置打包相关 //引入打包组件 const FileManagerPlugin = require('filemanager-webpack-plugin') //配置打包信息 const fs = require('
vue-cli-service build和vue-cli-service lint
08-24
通过执行vue-cli-service build命令，您可以生成一个用于生产环境的优化、压缩的Vue项目。请确保您已经按照相应的依赖和配置进行安装和设置，以便成功执行该命令。 vue-cli-service lint是用于代码风格检查的命令。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值