Vue项目打包编译优化方案
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项目打包优化的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Vue+Springboot实现接口签名的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
vuex是一个专门为vue.js设计的集中式状态管理架构。这篇文章主要介绍了vuex的简单使用,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了vue对象复制方式(深拷贝,多层对象拷贝方式在后面)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍了vue双向数据绑定的原理，文章结尾附上完整demo下载。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了如何使用vue3+TS实现简易组件库的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue 自动化路由实现代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
在vue-cli 3中给stylus、sass样式传入共享的全局变量
这篇文章主要介绍了在vue-cli 3中， 给stylus、sass样式传入共享的全局变量,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
这篇文章主要介绍了vue 输入电话号码自动按3-4-4分割功能的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了vue中style设置scoped后部分样式不生效的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
vue-cli3.0如何使用prerender-spa-plugin插件预渲染
这篇文章主要介绍了vue-cli3.0如何使用prerender-spa-plugin插件预渲染，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最新评论