Vue项目打包编译优化方案


Posted in Javascript onSeptember 16, 2020

1. 不生成.map文件

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

我们发现每个js文件都有一个相应的 .map 文件,它们仅是用来调试代码的,可以加快打包速度,但会增大打包体积,线上我们是不需要这个代码的。这里我们需要配置不生成map文件。

  • vue-cli2

config/index.js文件中,找到 productionSourceMap: true 这一行,将 true 改为 false。

  • vue-cli3

在 vue.config.js 中编写以下内容:

module.exports = {
 productionSourceMap: false
}

2. 按需引入第三方包

默认情况下,在打包完后的js文件中,vendor.xxx.js 这个文件是非常大的,它主要是我们用到的第三方包(vue、vue-router、vuex、axios、element-ui等等)。这里面的大部分是我们要用到的功能,而像 element-ui 这种,明显可以按块来分,我们只是用到了里面的个别组件,完全可以把它按需取出,没必要全部打包。

在 element-ui 的官网,介绍了按需引入的方法,借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

3. 路由懒加载

默认情况下,在打包完后的js文件中,app.xxx.js 这个文件是非常大的,它主要是我们编写的一些组件。那么无法避免的问题就是:当用户访问网页的时候,第一次的请求要加载整个 app.xxx.js,当我们的项目比较复杂的时候,这个文件也是相当大的。

接下来我们要做的,就是路由懒加载。也就是当访问一个页面的时候,只加载当前组件相关的js资源,访问其它页面的时候,再加载相应的组件代码。

通过vue提供的路由懒加载功能,我们能将原来的一个 app.xxx.js 文件,分块分成多个。

① 首先根据官网的说明,我们需要安装一个插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

② 然后在 babel.config.js 中配置如下内容(网上说的是 .babelrc 文件,这是以前的配置格式):

module.exports = {
 presets: ["@vue/app"],
 plugins: ["@babel/plugin-syntax-dynamic-import"]
};

③ 接下来修改路由加载组件部分的代码。

这是我们原来的路由写法:

router.js

import Vue from "vue";
import Router from "vue-router";

import Home from "./views/Home.vue";
import About from "./views/About.vue";
import Form from "./views/Form.vue";
import Table from "./views/Table.vue";
import NavMenu from "./views/NavMenu.vue";

Vue.use(Router);

export default new Router({
 mode: "history",
 base: process.env.BASE_URL,
 routes: [
 {
  path: "/",
  name: "home",
  component: Home
 },
 {
  path: "/about",
  name: "about",
  component: About
 },
 {
  path: "/form",
  name: "myForm",
  component: Form
 },
 {
  path: "/table",
  name: "myTable",
  component: Table
 },
 {
  path: "/nav_menu",
  name: "myNavMenu",
  component: NavMenu
 }
 ]
});

这是我们修改完的路由写法:

router.js

import Vue from "vue";
import Router from "vue-router";

const Home = () => import("./views/Home.vue");
const About = () => import("./views/About.vue");
const Form = () => import("./views/Form.vue");
const Table = () => import("./views/Table.vue");
const NavMenu = () => import("./views/NavMenu.vue");

Vue.use(Router);

export default new Router({
 mode: "history",
 base: process.env.BASE_URL,
 routes: [
 {
  path: "/",
  name: "home",
  component: Home
 },
 {
  path: "/about",
  name: "about",
  component: About
 },
 {
  path: "/form",
  name: "myForm",
  component: Form
 },
 {
  path: "/table",
  name: "myTable",
  component: Table
 },
 {
  path: "/nav_menu",
  name: "myNavMenu",
  component: NavMenu
 }
 ]
});

更细节的内容参见官方文档

以上就是Vue项目打包编译优化方案的详细内容,更多关于vue项目打包优化的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
Vue程序调试的方法
Jun 17 Javascript
js实现小时钟效果
Mar 25 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 #Javascript
如何在JS文件中获取Vue组件
Sep 16 #Javascript
javascript自定义加载loading效果
Sep 15 #Javascript
图解JS原型和原型链实现原理
Sep 15 #Javascript
vue实现简单全选和反选功能
Sep 15 #Javascript
vscode 调试 node.js的方法步骤
Sep 15 #Javascript
js实现特别简单的钟表效果
Sep 14 #Javascript
You might like
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
jquery radio 操作代码
2011/03/16 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
django模板语法学习之include示例详解
2017/12/17 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
化妆品促销方案
2014/02/24 职场文书
个人主要事迹材料
2014/08/26 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python