首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

关于vue-cli 3配置打包优化要点（推荐）

Posted in Javascript onApril 22, 2019

配置路由懒加载,封装了异步组件引入的方法,接收一个地址做参数

/**
 * 返回异步组件
 * @tips 请注意页面只能挂载在views文件下,非此路径请勿使用
 */
const AsyncComponentHook = (path: String): Function => (): any => {
  // 通过 webpack 的内联注释,设置模块名
  let component = import(/* webpackChunkName: "view-[request]" */ `@/views/${path}.vue`);
  component.catch((e) => {
    console.error(e);
  });
  return component;
};

配置代码压缩

// 安装
  npm install uglifyjs-webpack-plugin

  // 在vue.config.js文件中添加配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.plugins.push(
        //生产环境自动删除console
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_debugger: true,
              drop_console: true,
            },
          },
          sourceMap: false,
          parallel: true,
        })
      );
    }
  },

配置引用别名

设置插件的按需引入,本文使用的是element-ui，点击查看详情

经过一些基础的配置后,我们来看下目前打包后的效果。

从下图可以看到,打包出来后最大的包有1.33M。然后再看下请求,哇,217个请求、首页下载需要3.2M。

关于vue-cli 3配置打包优化要点（推荐）

关于vue-cli 3配置打包优化要点（推荐）

好吧，开始折腾

1. 优化scss配置文件的引入

我们在搭建项目的过程中经常性的会将一些scss配置文件抽离出来，例如主题色等，然后在每个需要的组件中引入。这样会显得很繁琐，我们可以借助sass-loader帮我们进行预处理，

这样我们就不用在每一个页面都进行引入样式，就能直接引用。

例如我们的样式文件目录下有一个theme.scss，我们可以在vue.config.js中作如下处理

// vue.config.js 配置
module.exports = {
 css: {
  // css预设器配置项
  loaderOptions: {
    // pass options to sass-loader
    sass: {
      // 引入全局变量样式,@使我们设置的别名,执行src目录
      data: `
        @import "@/stylePath/theme.scss";
      `
    }
  },
 },
}

通过以上配置,就可以在组件模板中注释以下代码

<style lang="scss">
  /* @import "@/stylePath/theme.scss"; */
</style>

2. 针对请求数进行优化

我们发现请求数增多是因为我们页面预先渲染了其它组件，会在html页面中插入像这样的东西<link rel="prefetch">，这该怎么优化呢？

首先我们先看下vue.config.js的官方文档，点击前往。
官方说明：  是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。

所以我们添加如下配置

// vue.config.js
module.exports = {
 chainWebpack: config => {
  // 移除 prefetch 插件
  config.plugins.delete('prefetch')
  // 移除 preload 插件
  config.plugins.delete('preload');
 }
}

 3. 公用代码提取，使用cdn加载

对于vue, vuex, vue-router，axios等我们可以利用wenpack的externals参数来配置，这里我们设定只需要在生产环境中才需要使用:

// vue.config.js
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
  css: [],
  js: [
    'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js',
    'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
    'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
    'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
  ]
}
module.exports = {
  chainWebpack: config => {
    // 生产环境配置
    if (isProduction) {
      // 生产环境注入cdn
      config.plugin('html')
        .tap(args => {
          args[0].cdn = cdn;
          return args;
        });
    }
  },
  configureWebpack: config => {
    if (isProduction) {
      // 用cdn方式引入
      config.externals = {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'axios': 'axios'
      }
    }
  },
}

接着修改html文件，添加注入代码

<!DOCTYPE html>
<html lang="zh">

<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">
 <!-- 使用CDN的CSS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style">
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
 <% } %>
 <!-- 使用CDN的JS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script">
 <% } %>
</head>

<body>
 <noscript>
  <strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
 <% } %>
</body>

</html>

然后打包重启，我们再来看下目前的变化。

嗯，真香~从下图可以看到,打包出来后最大的包文件只有775kb。然后再看下请求,哇,43个请求、首页下载只需要1.4M。

可以看出，我们这一系列的操作后请求数减少了174个，首页渲染减少了1.8m,真是可喜可贺

关于vue-cli 3配置打包优化要点（推荐）

关于vue-cli 3配置打包优化要点（推荐）

最后，附上完整的vue-config.js文件

const path = require("path");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
  css: [],
  js: [
    'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js',
    'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
    'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
    'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
  ]
}

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

module.exports = {
  // 基本路径
  baseUrl: './',
  // 输出文件目录
  outputDir: 'dist',
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  // assetsDir: "./",
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
  indexPath: './',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
    config
      .entry('index')
      .add('babel-polyfill')
      .end();
    // 配置别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@img", resolve("src/assets/images"))
      .set("@css", resolve("src/assets/styles/css"))
      .set("@scss", resolve("src/assets/styles/scss"));
    // 生产环境配置
    if (isProduction) {
      // 删除预加载
      config.plugins.delete('preload');
      config.plugins.delete('prefetch');
      // 压缩代码
      config.optimization.minimize(true);
      // 分割代码
      config.optimization.splitChunks({
        chunks: 'all'
      })
      // 生产环境注入cdn
      config.plugin('html')
        .tap(args => {
          args[0].cdn = cdn;
          return args;
        });
    }
  },
  configureWebpack: config => {
    if (isProduction) {
      // 用cdn方式引入
      config.externals = {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'axios': 'axios'
      }
      // 为生产环境修改配置...
      config.plugins.push(
        //生产环境自动删除console
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_debugger: true,
              drop_console: true,
            },
          },
          sourceMap: false,
          parallel: true,
        })
      );
    } else {
      // 为开发环境修改配置...
    }
  },
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // 引入全局变量样式
        data: `
          @import "@/stylePath/theme.scss;
        `
      }
    },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false,
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus().length > 1,
  devServer: {
    port: 8888, // 端口
    open: true, // 自动开启浏览器
    compress: false, // 开启压缩
    overlay: {
      warnings: true,
      errors: true
    }
  },
}

以上就是我针对打包后做的优化处理，当然还有其它优化点，比如开启gzip压缩，不过这个需要后台服务器支持，所以暂不配置。如果你还有其它优化点，欢迎一起讨论！

以上所述是小编给大家介绍的vue-cli 3配置打包优化要点详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

关于vue-cli 3配置打包优化要点（推荐）

- Author -

Echi灬丨无痕

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
js css+html实现简单的日历
Jul 14 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
jQuery取得元素标签名称小结（附代码）
Aug 16 jQuery
js实现左右两侧浮动广告
Jul 09 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
如何在 Vue 表单中处理图片
Jan 26 Vue.js
说说如何利用 Node.js 代理解决跨域问题
Apr 22 #Javascript
详解Vue中使用Axios拦截器
Apr 22 #Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 #Javascript
vue 项目build错误异常的解决方法
Apr 22 #Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 #Javascript
今天，小程序正式支持 SVG
Apr 20 #Javascript
详解Vue中组件的缓存
Apr 20 #Javascript
德劲1107(1) PR-D3L(1) YH-R296(1) 华普R-96(1) SRF-22W(1) 德生1994(1) ICF-SW100(1) 上海永华(1) SRF-40W(1) ICF-F10(1)
You might like
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
Python实现基于POS算法的区块链
2018/08/07 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python+pyqt5编写md5生成器
2019/03/18 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
Python中有几个关键字
2020/06/04 Python
数以千计的折扣工业产品：ESE Direct
2018/05/20 全球购物
COACH德国官方网站：纽约现代奢侈品牌，1941年
2018/06/09 全球购物
Jacques Lemans德国：奥地利钟表品牌
2019/12/26 全球购物
大学开学计划书
2014/04/30 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
高中军训的心得体会
2014/09/01 职场文书
学校组织向国旗敬礼活动方案（中小学适用）
2014/09/27 职场文书
内乡县衙导游词
2015/02/05 职场文书
学生安全责任协议书
2016/03/22 职场文书
创业计划书之美容店
2019/09/16 职场文书
Nginx 常用配置
2022/05/15 Servers