首页
所有分类
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 demo 基本技巧
Dec 18 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
详解jquery validate实现表单验证 （正则表达式）
Jan 18 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
说说如何利用 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
OpenFeign(1) cudnn(1) 热力图(1) webpack(1) cudn(1) Git(3) SandBox(1) RTX 3050 ti(1) callback(1) swing(1)
You might like
php定界符
2014/06/19 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
Position属性之relative用法
2015/12/14 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
分分钟玩转Vue.js组件（二）
2017/03/01 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
用WebStorm进行Angularjs 2开发(环境篇：Windows 10，Angular-cli方式)
2018/12/05 Javascript
[02:31]2014DOTA2国际邀请赛2009专访：干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
python处理二进制数据的方法
2015/06/03 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
django fernet fields字段加密实践详解
2019/08/12 Python
python内存管理机制原理详解
2019/08/12 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
通过代码实例了解Python sys模块
2020/09/14 Python
python用Configobj模块读取配置文件
2020/09/26 Python
详解Python流程控制语句
2020/10/28 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
下面关于＂联合＂的题目的输出是什么
2013/08/06 面试题
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
小班评语大全
2014/05/04 职场文书
文明班集体申报材料
2014/05/23 职场文书
个人买房协议书范本
2014/10/06 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
领导班子整改方案
2014/10/25 职场文书
小学六年级毕业感言
2015/07/30 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js