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 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
JS实现的几个常用算法
Nov 12 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
图文详解vue框架安装步骤
Feb 12 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
PHP 错误之引号中使用变量
2009/05/04 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Django模板语言 Tags使用详解
2019/09/09 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
python中逻辑与或(and、or)和按位与或异或(&、|、^)区别
2020/08/05 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
学雷锋标语
2014/06/25 职场文书
可可西里观后感
2015/06/08 职场文书
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python